jquery to toggle sub-menu but keep sub-menu open if sub-menu page active

Question

Just trying to dive into jquery and forgive me if this has already been answered. Searched but couldn't find an example relevant to what I'm trying to do.

I have a vertical menu with some sub menus. It is working that when the top level menu is clicked the sub menu opens up. The problem is that I would like the sub menu to stay open when one of sub-menu items is clicked. As it is now, when a sub-menu item is clicked the menu collapses.

Here is my code:

// Add class of drop if item has sub-menu
$('ul.sub-menu').closest('li').addClass('drop');

// Left Sidebar Main Navigation
var menu_ul = $('.menu > li.drop > ul'),
    menu_a  = $('.menu > li.drop > a');

menu_ul.hide();

menu_a.click(function(e) {
    e.preventDefault();
    if(!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('normal');
        $(this).addClass('active').next().stop(true,true).slideDown('normal');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true,true).slideUp('normal');
    }
});

I think if I try and translate what I want into a clear coder type sentence it would read like this. Basically I need to query the DOM for any active menu that has sub-menu, and if the page is showing one of the submenu items, then display the sub-menu dropdown.

Answer 1

I think you have two options.

1. Consider using Ajax to load your pages
2. Simulate the click event on each page.

For example:

For "Portfolio" items add this

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-38>a').trigger('click');
  });
</script>

For "About Us":

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-180>a').trigger('click');
  });
</script>

Answer 2

What about removing this line

menu_ul.filter(':visible').slideUp('normal');

It would prevent to hide the inactive menus.

Give it a try and let us know.

Answer 3

Create an extra class in your stylesheet

.menu ul.keepthisopen {display:block !important;}

Add the class to the ul in the submenu that you want to keep open.

(example) On the "About" page, go to into the code, find the menu, find the "About" link which is a

item, and below that is the submenu for that. Change it to

<ul class="keepthisopen">

Works fine here, with the same code/scripts as you are using. The submenu will slide up again too if you click another menu item.

I'm working with plain code though (small site) so it's easy for me to manually change this for each page.