I've been browsing through various posts that deal with similar concepts like addClass(), parent(), closest(), filter(), and the limitations of CSS regarding a parent selector. Despite my efforts, I haven't made much progress, so I'd greatly appreciate your assistance. :-)
A bit of context:
I have an unordered list that is dynamically generated by a content management system (CMS), so I am unable to modify or alter any of the existing classes within it. My scope is limited to working with CSS and utilizing jQuery.
Whenever a user selects an item from the list, the CMS applies a "selected" class not only to the selected list item but also to its parent list items, grandparent list items, and so on up the hierarchy based on the depth of the selected item in the menu.
I am required to utilize this single unordered list for both the primary navigation menu and a side navigation menu displayed on interior pages.
The task at hand:
For the side navigation, I need to show only the ul element that contains a selected list item, along with all the list items in that parent ul and not just the ones marked as selected. For instance, if there are two sections in my menu - About Us and Giving - and a user selects a page from the About Us section, I should only display the list items under About Us and exclude those under Giving. (Subsequently, I will apply styling to the top-level list items and the selected page's list item.)
I know how to display list items with the selected class, but I need to reveal all list items when a ul contains a selected list item anywhere within it. Furthermore, I must hide any other ul elements in the list that do not contain selected list items.
Below is the sample HTML code where the user has navigated to the Policies page under About Us -> Our Commitment.
<ul class="main-menu sm sm-simple">
<li class="menuItem1 first parent selected"><a href="#">About Us</a>
<ul class="nccUlMenuSub1">
<li class="menuItem1 first parent selected"><a href="#">Our commitment</a>
<ul class="nccUlMenuSub2">
<li class="menuItem1 first"><a href="#">Operating standards</a></li>
<li class="menuItem2 selected last"><a class="selected" href="#">Policies</a></li>
</ul>
</li>
<li class="menuItem2 last"><a href="#">Annual Report</a></li>
</ul>
</li>
<li class="menuItem2 last parent"><a href="#">Giving</a>
<ul class="nccUlMenuSub1">
<li class="menuItem1 first last"><a href="#">What your gift can do</a></li>
</ul>
</li>
</ul>