Javascript 切换菜单 - 子菜单问题

Question

我正在为一个相当复杂的网站开发响应式菜单。对于较小的屏幕，水平菜单折叠成垂直菜单，我使用 javascript 在单击时打开/关闭子菜单项。产品部分是唯一具有另一个子菜单更深层次的子菜单，它是不太适合它，因为只有第三级元素在点击时再次关闭，而不是父元素。

这是代码

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

和 javascript :

if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
    $('li.nav-list_item').not(this).find('ul').hide();
    $(this).find('ul').toggle();
});
}

我认为这可能是因为当单击父项(产品)时，按 javascript 中指定的 ul 关闭，但导航标题项(目的/系列)仍处于打开状态且无法关闭。我一直在努力解决这个问题，但就是无法让它工作，当点击标题项时，第三级菜单关闭，当点击父项(产品)时，标题项关闭。有什么建议吗？

Answer 1

首先，我不知道如何调试您的代码，因为您提供的不是一个有效的示例。前往 Codepen并创建一支笔，我们可以在其中重现问题。

除此之外，仅使用 hidden 就可以通过 css 实现导航 radio buttons或活跃状态。