jQuery open and close nested ul nav depending on location
- by firefusion
I'm making a sub nav in wordpress and have a nested list style menu. An example of the HTML is below. Whichever is the current item has the li class "current_page_item". I need all child menus collapsed unless there is a current_page_item class on the parent or one of the children.
<ul>
<li class="current_page_item"><a href="#">Parent Item</a>
<ul class="children">
<li><a href="#">Child page</a></li>
<li><a href="#">Child page</a></li>
<li><a href="#">Child page</a></li>
<li><a href="#">Child page</a></li>
</ul>
</li>
<li><a href="#">Parent Item</a>
<ul class="children">
<li><a href="#">Child page</a></li>
<li><a href="#">Child page</a></li>
</ul>
</li>
<li><a href="#">Parent Item</a>
<ul class="children">
<li><a href="#">Child page</a></li>
<li><a href="#">Child page</a></li>
</ul>
</li>
<li><a href="#">Parent Item</a></li>
<li><a href="#">Parent Item</a></li>
</ul>
This so far, which works but i wonder if it can be improved as there is some flashing open and then closed again....
jQuery('ul.children').slideUp();
jQuery('li.current_page_item ul.children').slideDown('medium');
jQuery('li.current_page_item').parent().slideDown('medium');
