I'm using a custom Bootstrap theme with Wordpress. I'm using the NavBar for my mobile menu. I have a stacked sub menu like so... https://www.dropbox.com/s/t4l0qjzno0wn42f/nav.jpg
The problem is that when one of these child items are clicked the parent closes. I would like the child panel to stay open as long as the user is inside that parent item. Is there a way to do this?
I'm not 100% sure i understand your question. Clicking a child item, should open a new page? On the new page you will keep the current item active (or its parent).
1) Find the url of the new page:
$(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1);
based on: https://stackoverflow.com/a/2865546/1596547 and https://stackoverflow.com/a/1991638/1596547
2) After this find your child item with the link to the url from 1):
$('li.dropdown ul.dropdown-menu li a[href="' + $(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1) +'"]')
3) a open active parent should have classes active and open add these classes based on 2):
$(function(){
if($link = $('li.dropdown ul.dropdown-menu li a[href="' + $(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1) +'"]'))
{
$link.closest('.dropdown').addClass('active open');
}
});
NOTE collapsing of the menu will remove all open classes. For you mobile version you should add the open class after collapse (see: events at http://getbootstrap.com/javascript/#collapse-usage).
