jQuery切换：单击另一个时关闭所有打开的li

Question

我有一个手风琴菜单，可在单击时切换。 这是代码：

$('ul.internal-nav-list li ').on('click', function () {
    $(this).find('.internal-sub-list li ').toggle();
});

标记看起来像这样：

<div id="internal-nav">
    <ul class="internal-nav-list"> 
        <li><a>products</a>
            <ul class="internal-sub-list">
                <li><a href="product1.aspx">product1</a></li>
                <li><a href="product2.aspx" >product2</a></li>
                <li><a href="product3.aspx">product3</a></li>                 
            </ul>    
        </li>
   </ul>
</div>

现在，我尝试启用以下功能：当打开菜单中的li元素并且用户单击另一个li ，打开的li将自动关闭。 有人可以给我一个建议吗？

Answer 1

我正在正确解释您想要的内容，请尝试以下操作：

var mainlis = $('.internal.nav.list > li'); // cache selector
mainlis.on('click', function(e) {
  e.preventDefault();
  var me = $(this);
  mainlis.hide();
  me.show();
});

Answer 2

最简单的解决方案是关闭所有li元素，然后仅打开一个单击的元素。

$('ul.internal-nav-list > li').on('click', function () {
  $(this).siblings('li').slideUp();
  $(this).slideDown();
});

编辑正如Morfie指出的那样，仅internal-nav-list的直接子li应该是可单击的，因此使用>运算符。

Answer 3

现有的其他答案很接近，但似乎您想要做的就是单击主菜单项时隐藏其他菜单项的子级。 在这种情况下，将执行以下操作：

$('.internal-nav-list > li > a').on('click', function () {
  var $thisLi = $(this).parents('li');
  $thisLi.siblings().find('.internal-sub-list').hide();
  $thisLi.find('.internal-sub-list').show();
});

注意第一个选择器：这将单击处理程序限制为仅锚点，而不是整个li 。 这意味着如果他们单击当前显示的主菜单项的子项，则不会调用该功能。 这样一来，您就不会因为单击子菜单项而有闪烁的危险...

在处理程序本身中，它遍历到父级li ，找到其同级并隐藏其子级。 然后显示当前选择的主菜单的子菜单。

请注意，我躲在了整个的自由ul非选择菜单; 这应该比隐藏每个孩子更快。 也许并不重要，但是我发现最好的做法是对容器而不是容器的所有子容器执行此类操作。

Answer 4

感谢您的建议-最终我以这种方式工作（以防它对任何人有帮助）

 $('ul.internal-nav-list li').on('click', function () {
        $close = $(this).find('.internal-sub-list li ').toggle();
        $('.internal-sub-list li').not($close).hide()

    });