Bootstrap toggle-nav item to stay open after click

Question

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>

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 Link

You'd have to store a variable in the session. When the page is open, based on that variable that you stored in your session, you'd open the appropriate tab in the menu. — Vlad, May 12 '15 at 14:54

score 0 · Answer 1 · edited May 23 '17 at 12:15

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

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>

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

store the value in a variable known as myVariable

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

you can set expiry date

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

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');

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 item to stay open after click

1 Answers1

Linked