关闭除活动菜单之外的所有子菜单

Question

我正在使用以下 html 代码显示带有子菜单的导航菜单，并使用以下 jQuery 代码切换 on/off 子菜单：

var container = $('.nav-menu');

container.find('.toggle').click(function(e) {
  var _this = $(this);
  e.preventDefault();
  _this.next('.sub-menu').slideToggle();
  $activeUl = _this.parent('li');
  $parentsUl = $activeUl.parents('ul');
  $('ul.sub-menu', container).not($activeUl).slideUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-menu">
  <li class="menu-item"><a class="toggle" href="#">Item 1</a>
    <ul class="sub-menu">
      <li class="menu-item">Item 1.1</li>
      <li class="menu-item">Item 1.2</li>
      <li class="menu-item">Item 1.3</li>
    </ul>
  </li>
  <li class="menu-item"><a class="toggle" href="#">Item 2</a>
    <ul class="sub-menu">
      <li class="menu-item">Item 2.1</li>
      <li class="menu-item">Item 2.2</li>
      <li class="menu-item">Item 2.3</li>
    </ul>
  </li>
  <li class="menu-item"><a class="toggle" href="#">Item 3</a>
    <ul class="sub-menu">
      <li class="menu-item">Item 3.1</li>
      <li class="menu-item">Item 3.2</li>
      <li class="menu-item">Item 3.3</li>
    </ul>
  </li>
</ul>

单击开关 link 时，我希望我的代码打开其相应的子菜单并关闭所有其他已打开的子菜单，但我无法使其工作。

有什么想法吗？

Answer 1

你可以尝试使用.not()

container.find('.toggle').click(function(e) {
    e.preventDefault();
    var _this = $(this);
    $('.sub-menu').not(_this.next('.sub-menu')).slideUp();
    _this.next('.sub-menu').slideToggle();
});

Working Demo

Answer 2

在第 $activeUl = _this.parent('li') 行，您正在选择父 li 元素，然后您试图取消选中它 .not($activeUl)。

这不起作用，因为未切换父元素。你应该否定兄弟 ul 而不是：

Working Example Here

$container.find('.toggle').click(function (e) {
    var $menu = $(this).next('.sub-menu').slideToggle();
    $('ul.sub-menu', $container).not($menu).slideUp();

    e.preventDefault();
});

关闭除活动菜单之外的所有子菜单

Toggle all submenus off except the active one

jquery

html

drop-down-menu

slidetoggle

submenu