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>