Javascript toggle menu -issue with sub-menues

Question

I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.

Here's the code

<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>

And the 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 think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?

Answer 1

First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.

Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.

Answer 2

$('li.nav-list_item a, .nav-title').on('click', function(e){
    e.preventDefault();
    
    var el = $(this);
    el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
    el.parent().find('> .dropdown, > ul').toggle();
});

#nav-list .nav-list_item {
  display: block;
}
#nav-list .nav-list_item .dropdown{
  display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.