I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is with the product section, which has another level of sub-menu that does not behave as expected – only the third level items close when clicked, not the parent item.
Below is the code snippet:
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about"><a href="....">About us</a>
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products"><a href="....">Products</a>
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>Here is the corresponding javascript:
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}I suspect the issue arises from the fact that when the parent item (products) is clicked, the ul elements close as per the script, but the nested nav-title items (Purpose/Series) remain open and cannot be closed. I have been attempting to address this problem without success. Any suggestions on how to ensure that clicking on the title items closes the third-level menu while clicking on the parent item (Products) closes the title items?