Show/Hide child elements when on parent page

0
votes

I am working with Wordpress and the wp_nav_menu function. I have built a sample menu in the Wordpress backend like such:

  • Menu Item 1
  • Menu Item 2
    • Sub Menu Item
  • Menu Item 3

I would like for the submenu to only show when on the parent or parent's child's pages.

I am unsure of how do go about this. I think CSS/jquery would do, but I will take any solutions.

Here is the page I am working on currently.

EDIT: Sorry for the confusion - I do not want a rollover menu, I want it to be static. When I am on a parent page, I want the submenu (child) to show. When I am not on a parent page, I do not want the child links to show.
4
jquerycsswordpress

4 Answers

0
votes

Try this:

$(function(){
   $('.sub-menu').hide();
   $('.menu-item').click(function(){
       $('.sub-menu').hide();
       $(this).find('.sub-menu').show();
   });
});
0
votes

Try this in javascript:

$(function(){
    $("#menu-main a[href='" + window.location.pathname + "']").next().addClass('opened');
});

and in css:

ul.opened {
    display:block;
}
0
votes

This can be achieved by only using CSS, which, if possible, is preferred over using Javascript.

HTML:

<ul class="top">
    <li>first</li>
    <li>second
      <ul class="sub">
         <li>sub-first</li>
         <li>sub-second</li>
      </ul>
    </li>
    <li>third</li>
 </ul>

CSS:

ul ul.sub {
  display: none;
}

ul.top > li:hover > ul {
  color:red;
  display:block;
}
0
votes

Here you go. Keeping it simple(and)stupid. This does exactly what you asked for--hides sub menu unless on the parent page. 

$(function(){
   $('.sub-menu').hide(); //Hide sub menu by default
   $('.current-menu-item').children('.sub-menu')​.show();​ //Show sub menu if parent selected
});