Bootstrap toggle-nav项目在单击后保持打开状态 [英] Bootstrap toggle-nav item to stay open after click

问题描述

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

I have simple Bootstrap 3 toggle navigation :

<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并转到该页面，打开菜单的那一部分那个page.Etc，如果我点击测试3，url带我进入测试3页，打开菜单的第二部分......

I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...

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

I try with similar problems, but no result,when go to page,menu is collapsed.

Bootply链接

推荐答案

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

I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies: you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie

现在为您的所有下拉链接提供一个ID

Now give an id to all of your dropdowns link

<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：
就像它在这里完成：
获取项目的ID被点击

add an event listener to get the id of the dropdown link being click: just like it is done here:
get id of item clicked

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

store the value in a variable known as myVariable

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

您可以设置到期日期

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

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

in the other page, you read the cookie and store it in new variable:

newVariable = $.cookie('cookieName');

使用该变量启用您的下拉列表

use that variable for your dropdown to be enabled

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

您可能要检查的其他事项是：在javascript中发送变量-cookies方法，自动打开下拉列表，链接的商店ID

Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link

这篇关于Bootstrap toggle-nav项目在单击后保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！