Bootstrap 切换导航项目在单击后保持打开状态答案

【问题标题】：Bootstrap toggle-nav item to stay open after clickBootstrap 切换导航项目在单击后保持打开状态
【发布时间】：2015-07-23 12:57:56
【问题描述】：

我有简单的 Bootstrap 3 切换导航：

<ul class="nav navmenu-nav clearfix" >
    <li class="navmenu-brand dropdown clearfix">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-delay="5000"><i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span></a>

        <ul class="dropdown-menu" role="menu">
            <li class="clearfix">
                <a href="url 1">test 1</a>
            </li>               
            <li class="clearfix">
                <a href="url 2">test2</a>
            </li>   
        </ul>
    </li>

    <li class="navmenu-brand dropdown clearfix">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span></a>

        <ul class="dropdown-menu" role="menu">
            <li class="clearfix">
                <a href="url 3">Test 3</a>
            </li>
            <li class="clearfix">
                <a href="url 4">Test 4</a>
            </li>
        </ul>
    </li>
</ul>

当我点击测试 1 并转到该页面时，我需要在该页面上打开菜单的那部分。等等，如果我点击测试 3，url 带我进入测试 3 页面，打开第二部分菜单...

我尝试了类似的问题，但没有结果，当转到页面时，菜单被折叠。

Bootply Link

【问题讨论】：

您必须在会话中存储一个变量。当页面打开时，根据您在会话中存储的变量，您将在菜单中打开相应的选项卡。

标签： javascript css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我没有太多时间，但我将为您推荐一个程序。所以我建议你使用 cookie 用 Jquery 保存变量：你可能需要调用这个：<script src="/path/to/jquery.cookie.js"></script> 并且在 github 上的插件链接就在这里：jquery cookie

现在为所有下拉链接添加一个 ID

<a href="#" id="currentvalue" class="dropdown-toggle" data-toggle="dropdown" role="button"><i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span></a>

添加一个事件监听器来获取被点击的下拉链接的 id：就像在这里完成的那样：
get id of item clicked

将值存储在名为 myVariable 的变量中

$.cookie('cookieName', 'myVariable');

你可以设置有效期

$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day

在另一个页面中，您读取 cookie 并将其存储在新变量中：

newVariable = $.cookie('cookieName');

使用该变量来启用您的下拉菜单

$(newVariable).dropdown('toggle');

您可能要检查的其他内容是：send variables -cookies method in javascript、Open a dropdown automatically、store id of a link

【讨论】：