Question

我有一个包含许多父菜单和子菜单项的菜单栏：

<nav>
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
   </li>
   <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
   </li>
  </ul>
</nav>

默认隐藏子子菜单：

.menu-item-has-children > ul {
  display: none;
}

我想实现以下目标：

单击顶级菜单项时，我想切换（显示/隐藏）其关联的子菜单，并隐藏可能打开的任何其他子菜单。
当页面上的其他任何地方被点击而不是子菜单或其父项时，我想隐藏所有子菜单。

我正在使用以下代码，但它没有显示正确的子菜单，而是显示/隐藏所有子菜单：

$(document).on('click', function(e) {
  if($(e.target).parent().hasClass('menu-item-has-children')) { 
    $(this).find('ul').show();
  } else {
    $('.menu-item-has-children > ul').toggle();
  }
});

请参阅小提琴：https://jsfiddle.net/gs9q6kwh/

知道我做错了吗？

Answer 1

这可以通过先隐藏所有子菜单，然后只显示被点击父级的兄弟子菜单来轻松实现：

＆＃13;

$(document).on('click', function(e) {
  $('.menu-item-has-children > ul').hide();

  if ($(e.target).parent().hasClass('menu-item-has-children')) {
    $(e.target).siblings('ul').toggle();
  }
});

＆＃13;

.menu-item-has-children>ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children">
      <a href="#">Parent item</a>
      <ul>
        <li><a href="#">Child item</a></li>
        <li><a href="#">Child item</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

jQuery代码存在一些问题：

单击子菜单项会导致所有菜单崩溃。您需要重新构建jQuery以检查这些项以及父项。
jQuery正在搜索'ul'的所有实例并显示它们，而不仅仅是目标的子项。而不是使用.find（），尝试使用children（）。
单击父项不会在显示和隐藏之间切换。我建议在父项中添加一个类，让代码知道它的状态（显示或隐藏），然后相应地切换。

单击时切换下拉菜单并隐藏所有其他下拉菜单

2 个答案: