Question

我试图设置一个手风琴风格的菜单，在嵌套的列表结构中，单击锚标记会向相邻的ul添加一个类，从而改变它的高度，从而使它可见。我已经成功地使它工作了，但我想在选择一个子菜单时将其扩展到关闭其他子菜单。

这是我的菜单标记：

<nav>
  <ul id="menu" class="">
    <li class="dropdown">
      <a>Markets <b class="caret"></b></a>
      <ul class="submenu">
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
    </li>
    <li class="dropdown">
      <a>Management Focus <b class="caret"></b></a>
      <ul class="submenu">
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
    </li>
  </ul>
</nav>

这是jQuery：

  $('li.active ul').addClass('show');
  $('#menu-market-intelligence-bar>li.dropdown>a').click( function(e){
    $(this).parent().children('ul').toggleClass('show');

    ** // $(this).parent().parent().children('li > ul').not(this).removeClass('show');

    e.preventDefault();
  });

**这是我尝试跳回到父级的父级并抓住它不是当前元素的子元素。可能很难看。任何帮助非常感谢！

Answer 1

在我看来，最简单的方法是从除了兄弟ul之外的所有uls中删除show类，然后切换兄弟ul show类：

$('#menu-market-intelligence-bar>li.dropdown>a').click( function(e){

    $('ul').not($(this).siblings('ul')).removeClass('show');
    $(this).siblings('ul').toggleClass('show');

    e.preventDefault();
  });

jQuery - 嵌套列表：打开时折叠其他列表

1 个答案: