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

Question

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

现在，菜单显示/隐藏在单击项目本身。它还隐藏了所有打开的子菜单，点击子菜单外部。这两个都很好。

但是，有两个bug我无法很好地解决：

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

工作码

编辑

对不起，如果您单击了打开的元素，就没有必要切换。一种方法是隐藏所有的子菜单，然后像以前一样显示想要的子菜单，但是首先检查它是否已经打开，在这种情况下，我们只是隐藏它。然后向子菜单中添加一个事件以停止传播：

$(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检查单击的内容。

我已经更新了密码

Answer 2

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

钢笔