Question

我使用JQuery制作了一个可点击的下拉菜单。

下拉菜单的工作方式如下：
1）＆＃39; a＆＃39;下拉切换点击，＆＃39; a＆＃39;下拉菜单可见
2）不是（＆＃39; a＆＃39;下拉切换和＆＃39; a＆＃39;下拉菜单）=== dropdownMenu是隐藏
3）setTimeOut是需要的（我真的代码是动画css）

我想要多个下拉菜单。

a，b，c，d ......和＆＃34; Z＆＃34;

但是我的下拉菜单会出现这个问题：
1）下拉切换点击，b下拉切换后点击===下拉不隐藏
2）但此代码不包括document.closeset（我想包括dropdownToggle.click（function（）＆lt;＆lt;＆lt;

我该如何解决这个问题？任何帮助都将受到高度赞赏。

＆＃13;

$(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();
    }
  });
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

使用现有代码，您可以添加以下行：

dropdownClose();

这两行之间：

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

这将在打开目标同级菜单之前关闭整个菜单。

另一种做同样事情的方法：

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

我的可点击jQuery下拉菜单不起作用

1 个答案: