Javascript 切换菜单 - 子菜单问题答案

【问题标题】：Javascript toggle menu -issue with sub-menuesJavascript 切换菜单 - 子菜单问题
【发布时间】：2015-12-05 11:20:33
【问题描述】：

我正在为一个相当复杂的网站制作响应式菜单。对于较小的屏幕，水平菜单折叠为垂直菜单，并且我使用 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，但导航标题项（目的/系列）仍处于打开状态且无法关闭。我一直在尝试解决这个问题，但是当单击标题项时，第三级菜单关闭并且当单击父项（产品）时，标题项关闭时无法使其工作。有什么建议吗？

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

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

除此之外，可以仅使用 hidden radio buttons 或活动状态来实现使用 css 的导航。

【讨论】：

【解决方案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>

我为你添加了 Fiddle。另外下次最好为其他开发者添加小提琴以更快地帮助您。

【讨论】：