javascript - 如何让我的下拉菜单一次只允许打开一个下拉菜单，并在单击 <li> 时保持打开状态？

Question

我正在开发一个下拉菜单，该菜单在单击时显示下拉菜单，而不是在悬停时显示。这需要 js，而且有点管用。

现在，菜单会在单击元素本身时显示/隐藏。它还会在子菜单外单击时隐藏所有打开的子菜单。这两个都不错。

但是，有两个错误我无法优雅地解决:

1. 子菜单会在点击子列表项时隐藏，但它应该保持打开状态。
2. 可以一次打开多个子菜单，但我希望在打开新子菜单时关闭所有其他子菜单。

代码笔在这里:http://codepen.io/dr-potato/pen/rLleC?editors=111

用 JS 创建这种菜单的最简单、最优雅和最可靠的方法是什么？

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">About</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">Contact</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
</ul>

CSS

.Navigation-list {
    display: block;
}

.Navigation-list.is-hidden {
    display: none;
}

JS

$(document).ready(function() {
    $('.Navigation-listItem').click(function() {
      $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
    });
});

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $(".Navigation-list.is-dropdown").addClass('is-hidden');
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
  e.stopPropagation();
});

Answer 1

只需更改您的点击事件以隐藏所有子菜单，然后在当前元素下显示它们，而不是切换:

$('.Navigation-listItem').click(function() {
      $(".Navigation-list.is-dropdown").addClass('is-hidden');
      $(this).children('.Navigation-list.is-dropdown').removeClass('is-hidden');
});

Working codepen

编辑

抱歉，如果您单击打开的元素，则错过了切换的需要。一种选择是隐藏所有子菜单，然后像以前一样显示想要的子菜单，但首先检查它是否已经打开，在这种情况下我们只是隐藏它。然后向子菜单添加一个事件以停止传播:

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      if( $(this).children('.Navigation-list.is-dropdown').hasClass('is-hidden') ){
        $(".Navigation-list.is-dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list.is-dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list.is-dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list.is-dropdown').click(function(e) {
    e.stopPropagation();
  });
});

另一种方法是通过 e.target 检查点击了什么。

我已经更新了codepen