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.

@Cheluis I can't seem to get everything I need into the fiddle to show. Here it is on the site [link](http://jeniolsendesign.com/tempurl) — Grady, Aug 10 '12 at 16:45
@Cheluis I made a fiddle though it only shows the nav menu. Not really the effect of navigating to a sub menu page and keeping the menu open. http://jsfiddle.net/4kYde/ — Grady, Aug 10 '12 at 17:18

score 1 · Accepted Answer · answered Aug 10 '12 at 18:12

1

I think you have two options.

Consider using Ajax to load your pages
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>

answered Aug 10 '12 at 18:12

MCSI

2,818
26
35

Using #2 worked :). This is in a WP theme and I have a portfolio php file so that code went there. For the 3 about us pages I dropped it into the html part of the editor just for those pages. For anyone else reading this I changed $(document) to jQuery(document) to get it to work for me. For a more permanent fix using this method I could create an About Us page template with that little bit of code in it. – Grady Aug 10 '12 at 19:59
good! remember to accept the answer if it was helful to you! ;) – MCSI Aug 10 '12 at 20:16

score 1 · Answer 2 · answered Dec 26 '13 at 15:18

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.

score 0 · Answer 3 · answered Aug 10 '12 at 19:19

0

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.

answered Aug 10 '12 at 19:19

Cheluis

1,402
3
22
51

This allows either sub menu to be toggled but they all close when a sub menu item is clicked. See it here http://jeniolsendesign.com/about/clients/ – Grady Aug 10 '12 at 19:40
if you click a submenu it loads the whole page... I'm confused now – Cheluis Aug 10 '12 at 19:54

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

3 Answers3

Linked