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

Question

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

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

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

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

codepen 在这里：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

css

.Navigation-list {
 display: none;
}
.is-dropdown{
 display:block;
}

脚本

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

Pen

Answer 2

只需更改您的点击事件以隐藏所有子菜单，然后在当前项目下显示这些子菜单，而不是切换：

$('.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