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时，打开的元素将自动关闭。任何人都可以就如何做到这一点给我一个建议吗？

Answer 1

我＆＃39; v我正确地解释你想要的东西，试试这个：

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元素并仅打开单击的

internal-nav-list

编辑正如this one所指出的，只有>的直接子toydf<-data.frame( base1=c("DOG","CAT","MOUSE"), base2=c("FISH","RAT","BUNNY"), target=c("DOG","HORSE","BUNNY"), stringsAsFactors=FALSE) base1 base2 target 1 DOG FISH DOG 2 CAT RAT HORSE 3 MOUSE BUNNY BUNNY应该是可点击的，因此使用base1 base2 target check 1 DOG FISH DOG TRUE 2 CAT RAT HORSE FALSE 3 MOUSE BUNNY BUNNY TRUE运算符

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

    });

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

4 个答案: