Daniel Daniel - 7 months ago 15
Javascript Question

JQuery, how to show class within class if class exists?

For my Wordpress theme, I am trying to access and show the sub-menu within the list item that has the class .current-page-item

Currently I have this:

$(document).ready(function() {
$(".sub-menu").hide();
$(".current-page-item").find(".sub-menu").show();
});


If I put an Alert('whatup'); inside the if statement, it will display the alert however it will not show(); the UL with the class .sub-menu

Could anyone help me out please?

Edit:
Here is the HTML code wordpress generates:

<ul id="menu-main" class="menu">
<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-11">
<a href="http://localhost:8080/subfolder/wordpress/">ABOUT COMPANY</a>
<ul class="sub-menu">
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost:8080/subfolder/wordpress/?page_id=15">TEAM</a></li>
</ul>
</li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10">
<a href="http://localhost:8080/subfolder/wordpress/?page_id=7">COMPANY PHILOSOPHY</a>
<ul class="sub-menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8080/subfolder/wordpress/?page_id=19">STRATEGY</a></li>
</ul>
</li>
</ul>

Eli Eli
Answer

Based on your HTML structure, just do like this:

$("#menu-main").find("li.current_page_item").find("ul.sub-menu").show();

Demo: http://jsfiddle.net/u44Yn/1/

Note that your code not working because the class of your li is current_page_item not current-page-item

Comments