html - 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>