当单击事件切换另一个ul时，关闭所有打开的ul

Question

我有一个垂直下拉菜单，我正在使用jQuery切换打开/关闭子菜单。 当用户单击父项时（例如，“关于”子菜单打开，然后再次单击该子菜单，子菜单再次关闭），它工作正常。但是，如果用户没有再次单击父项（“关于”），关闭它，但是单击其他父项（例如，“ Industry”）以打开子菜单，这两个子菜单（“ About”和“ Industry”）都可见。因此，我需要它起作用，以便“ Industry”自动关闭单击。这是代码：

<nav> 
<ul id="nav-list">
    <li class="nav-list_item nav-about><a href="#">About</a>
        <div id="about-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>

    <li class="nav-list_item nav-industry"><a href="#">Industry</a>
        <div id="industry-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
    <li class="nav-list_item nav-application"><a href="#">Application</a>
        <div id="application-drop">
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </li>
</ul>

和JavaScript：

 $('li.nav-about').click(function () {
        $(this).find('ul').toggle();
    });

    $(' li.nav-industry').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });
 $('li.nav-application').click(function () {
        $("html, body").animate({ scrollTop: 0 }, "fast");
        $(this).find('ul').toggle();
    });

我已经尝试过在stackoverflow上找到的其他方法，但是无法正常工作。 有什么建议么？

Answer 1

演示

$('li.nav-about').click(function () {
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

$(' li.nav-industry').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, "fast");
    $(this).find('ul').toggle();
    $(this).siblings('li').find('ul').hide();
});

单击时仅隐藏另一个div。

Answer 2

我认为您可以删除这样的冗余代码：

 $('li.nav-list_item').click(function () {
    $('li.nav-list_item').find('ul').hide();
    $("html, body").animate({ scrollTop: 0 }, "fast");
    $(this).find('ul').toggle();
});

您可以以此替换您的js。

Answer 3

 $('#nav-list li').on('click', function() { $('#nav-list li').not(this).find('div').hide(); $(this).find('div').toggle(); }); 

 .nav-list_item > div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-list"> <li class="nav-list_item nav-about"><a href="#">About</a> <div id="about-drop "> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div> </li> <li class="nav-list_item nav-industry"><a href="#">Industry</a> <div id="industry-drop "> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div> </li> <li class="nav-list_item nav-application"><a href="#">Application</a> <div id="application-drop "> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div> </li> </ul> 

无需如此复杂的处理程序。