通过单击外部关闭jquery下拉菜单

I am developing a simple dropdown menu with jquery . When a user press on a trigger area , it will toggle the dropdown area. My question is how to have a click event outside of the dropdown menu so that it close the dropdown menu ?

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

6 个解决方案

#1

You can tell any click that bubbles all the way up the DOM to hide the dropdown, and any click that makes it to the parent of the dropdown to stop bubbling.

您可以告诉任何点击在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();
});

Demo: http://jsbin.com/umubad/2/edit

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

#2

how to have a click event outside of the dropdown menu so that it close the dropdown menu ? Heres the code

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

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

#3

You would need to attach your click event to some element. If there are lots of other elements on the page you would not want to attach a click event to all of them.

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

One potential way would be to create a transparent div below your dropdown menu but above all other elements on the page. You would show it when the drop down was shown. Have the element have a click hander that hides the drop down and the transparent div.

一种可能的方法是在下拉菜单下方创建透明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>

#4

Stopping Event Propagation in some particular elements ma y become dangerous as it may prevent other some scripts from running. So check whether the triggering is from the excluded area from inside the function.

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

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

Here function is initiated when clicking on document, but it excludes triggering from #menucontainer. For details https://css-tricks.com/dangers-stopping-event-propagation/

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

#5

Selected answer works for one drop down menu only. For multiple solution would be:

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

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

#6

Another multiple dropdown example that works https://jsfiddle.net/vgjddv6u/

有效的另一个多下拉示例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>

#1