Question

我创建了一个下拉菜单，当我点击其父li元素时，该菜单会打开和关闭。但是，当用户在菜单外单击时，我将用于关闭它的代码放入，这使得点击父li不再关闭菜单，而只是打开它。

这是html代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
       <a href="#" class="dropdown-toggle">Courses</a>
       <ul class="dropdown-menu">
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Php</a></li>
         <li><a href="#">Java</a></li>
         <li><a href="#">Python</a></li>
       </ul>
    </li>
  </ul>
</body>
</html>

这是CSS：

 *{padding: 0;margin: 0}
li{list-style-type: none}
.menu{background: #333;display: block}
.menu:after, .menu:before{content: '';display: table;clear: both}
.menu>li{display: inline-block;float: left}
.menu a{display: block;text-decoration: none;color: #f9f9f9;padding: 6px 10px;background: #333}
.menu a:hover{ background: #000; }
.dropdown-menu{position: absolute;max-height: 0;overflow: hidden;transition: max-height 1s ease}
.open .dropdown-menu{max-height: 30rem}

和Jquery：

(function($){
  $('.dropdown-toggle').on('click', function(e){
    $(this).parent().toggleClass('open');
    $(this).parent().siblings().removeClass('open');
  });

  // This code to hide the dropdown menu 
  // when the user click outside the menu

  $(document).on('mouseup', function(e){

    $(".dropdown-menu").each(function( index ) {
      if(e.target !== $(this)) {
        $(this).parent().removeClass('open');
      }
    });

  });
})(jQuery);

Answer 1

您正在使用class='dropdown-menu'检查每个元素的文档点击。所以if(e.target !== $(this))永远都是真的。您只需要截取一次条件（我通过比较单击元素上的class属性来完成它）并通过每个循环删除该类。另外，为了避免事件传播到$('.dropdown-toggle').on('click'，您必须使用e.preventDefault()。

$('.dropdown-toggle').on('click', function(e){
    $(this).parent().toggleClass('open');
    $(this).parent().siblings().removeClass('open');
  });

  $(document).on('mouseup', function(e){
    var eleNotFound = false;
    if($(e.target).attr("class") !== "dropdown-toggle") 
    {
          eleNotFound = true;
         $(".dropdown-menu").each(function(){
           $(this).parent().removeClass('open');
         });       
    }
     if(eleNotFound)
       e.preventDefault();
  });

工作示例：https://jsfiddle.net/DinoMyte/5nqh05b2/2/

Answer 2

我在HTML中也做了一些改动。而不是设置高度，您可以触发可见性。以下是工作代码。

 (function($) {
  $('a.dropdown-toggle').on('click', function(event) {
    var respectivemenu = $(this).next();
    $("ul.dropdown-menu").not(respectivemenu).removeClass('open');
    respectivemenu.toggleClass('open');
    event.stopPropagation();
  });


  $(document).on('click', function(e) {
    if ($(this).next().not(".open")) {
      $(".dropdown-menu").removeClass('open');
    }
  });

})(jQuery);

演示：https://jsfiddle.net/q5eg9cwq/3/

Answer 3

我已经设法使用另一种方法，在你的答案的帮助下解决了这个问题。

jQuery代码应该是：

(function($){
  $('.dropdown-toggle').on('click', function(e){
    $(this).parent().toggleClass('open').siblings().removeClass('open');
  });

  $(document).on('mouseup', function(e){
    if (!$(e.target).hasClass('dropdown-toggle')) {
      $('.dropdown-menu').parent().removeClass('open');
    }
  });
})(jQuery);

如何在单击其父级或外部时打开/关闭下拉菜单

3 个答案: