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

jquery drop down menu closing by clicking outside

提问by user670800

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 开发一个简单的下拉菜单。当用户按下触发区域时，它将切换下拉区域。我的问题是如何在下拉菜单之外有一个点击事件，以便关闭下拉菜单？

回答by Sampson

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

回答by Pash

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

回答by jacob.toye

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.

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

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>

回答by Jithin B

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/

回答by Y. ?zdemir

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>

回答by Maciej Pyszyński

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