我的可點擊jQuery下拉菜單不起作用

Question

我已經使用JQuery制作了一個可點擊的下拉菜單。

下拉菜單必須像這樣工作：
1）'a'下拉開關單擊，'a'下拉菜單可見
2）not（'a'下拉開關和'a'下拉菜單）=== dropdownMenu隱藏
3）setTimeOut是需要的（我真的代碼是動畫CSS）

我想要多個下拉菜單。

a，b，c，d ...和“ Z”

但是我的下拉菜單出現了這個問題：
1）下拉切換點擊，b下拉切換點擊===后，一個下拉菜單不隱藏
2）但此代碼不包含document.closeset（我想包含dropdownToggle.click（function（）<<<

我該如何解決這個問題？ 任何幫助將不勝感激。

 $(function(){ body = $('body'); /* dropdown */ var dropdown = $('.dropdown'), dropdownToggle = dropdown.find('.toggle'), dropdownMenu = dropdown.find('.menu'), checkDropdownOpen = 'close'; dropdownToggle.click(function() { $(this).each(function() { // setInitial var thisDropdown = $(this).parent('.dropdown'), thisDropdownToggle = $(this), thisDropdownMenu = $(this).next('.menu'); // checkDropdownMenu = open if (!thisDropdownMenu.hasClass('open') && (thisDropdownMenu.attr('aria-hidden') === 'true' || thisDropdownMenu.attr('aria-hidden') === undefined)) { // visible setTimeout(function() { checkDropdownOpen = 'open'; thisDropdownMenu.addClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'false'); }, 218); } else if (thisDropdownMenu.hasClass('open') && thisDropdownMenu.attr('aria-hidden') === 'false') { // visible setTimeout(function() { checkDropdownOpen = 'close'; thisDropdownMenu.removeClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'true'); }, 218); } }) }); /* dropdownClose() */ function dropdownClose() { // toggle dropdownMenu.removeClass('open'); // hidden, attr change setTimeout(function() { body.removeClass('account-open'); dropdownMenu.attr('aria-hidden', 'true'); }, 218); } /* document click */ $(document).click(function(e) { // dropdown if (!$(e.target).closest(dropdown).length) { dropdownClose(); } }); }); 

 .dropdown .menu { display: none; } .dropdown .menu.open { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div> 

Answer 1

使用現有代碼，您可以添加以下行：

dropdownClose();

這些行之間：

dropdownToggle.click(function() {
$(this).each(function() { 

這將在打開目標同級菜單之前關閉整個菜單。

另一種執行相同操作的方式：

$( document ).ready(function() {
  $('.toggle').on('click', function() {
    $('.menu').hide(250);
     $(this).next().show(500);
  });
});