点击外面的jquery下拉菜单关闭

Question

我正在使用jquery开发一个简单的下拉菜单.当用户按下触发区域时,它将切换下拉区域.我的问题是如何在下拉菜单之外进行点击事件,以便关闭下拉菜单？

Answer 1

您可以告诉任何在DOM上一直冒泡的点击以隐藏下拉列表,并且任何点击都会使其显示在下拉列表的父级中以停止冒泡.

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$("#dropdown").click(function(e){
  e.stopPropagation();
});

演示:http://jsbin.com/umubad/2/edit

Answer 2

如何在下拉菜单之外进行点击事件,以便关闭下拉菜单？继承人的代码

$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".dropDown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.subMenu').hide();
    }
})

Answer 3

您需要将click事件附加到某个元素.如果页面上有许多其他元素,您不希望将click事件附加到所有元素.

一种可能的方法是在下拉菜单下方创建透明div,但最重要的是在页面上的所有其他元素上创建.您可以在显示下拉菜单时显示它.元素有一个隐藏下拉菜单和透明div的点击错误.

$('#clickCatcher').click(function () { 
  $('#dropContainer').hide();
  $(this).hide();
});

#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>

Answer 4

在某些特定元素中停止事件传播可能会变得危险,因为它可能会阻止其他某些脚本运行.因此,检查触发是否来自函数内部的排除区域.

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

此功能在单击文档时启动,但不包括从#menucontainer触发.有关详细信息,请访问https://css-tricks.com/dangers-stopping-event-propagation/

Answer 5

另一个有效的多下拉示例 https://jsfiddle.net/vgjddv6u/

$('.moderate .button').on('click', (event) => {
  $(event.target).siblings('.dropdown')
    .toggleClass('is-open');
});

$(document).click(function(e) {
  $('.moderate')
    .not($('.moderate').has($(e.target)))
    .children('.dropdown')
    .removeClass('is-open');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<style>
.dropdown {
  box-shadow: 0 0 2px #777;
  display: none;
  left: 0;
  position: absolute;
  padding: 2px;
  z-index: 10;
}

.dropdown a {
  font-size: 12px;
  padding: 4px;
}

.dropdown.is-open {
  display: block;
}
</style>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a>   </li>
    </ul>
  </div>
</div>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a></li>
    </ul>
  </div>
</div>

Answer 6

所选答案仅适用于一个下拉菜单.对于多种解决方案将是:

$('body').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});