如何獲得我的下拉菜單，一次只允許一個打開的下拉菜單，並在單擊某個菜單時保持打開狀態 <li> ？

Question

我正在使用一個下拉菜單，該下拉菜單顯示onclick而不是懸停時的下拉菜單。 這需要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');
 });
});

鋼筆

Answer 2

只需更改您的點擊事件即可隱藏所有子菜單，然后在當前項目下顯示這些子菜單，而無需切換：

$('.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檢查單擊的內容。

我已經更新了Codepen