Question

我使用以下html代码显示带子菜单的导航菜单和以下jQuery代码来切换开/关子菜单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

有什么想法吗？

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

除活动子菜单外，关闭所有子菜单

2 个答案: