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

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

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

这里的函数是在点击文档时启动的，但它排除了#menucontainer 的触发。 详情https://css-tricks.com/dangers-stopping-event-propagation/

Answer 4

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

一种可能的方法是在下拉菜单下方但在页面上的所有其他元素上方创建一个透明的 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 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();
});

Answer 7

有一种棘手的方法可以做到这一点。 您可以通过添加tabIndex来操纵blur事件。

 $('.click').click(function (e) { $(this).siblings('.dropdown').fadeToggle(100); }); $('.container').blur(function (e) { $('.dropdown').fadeOut(100); });

 .container{ position: relative; display: inline-block; } .click{ cursor: pointer; user-select: none; z-index: 1; } .dropdown{ position: absolute; left: 0; top: 100%; display: none; background: #eee; padding: 1rem; z-index: 2; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="container" tabIndex="1"> <section class="click">click this</section> <section class="dropdown"> dropdown menu here </section> </section> <br /> <br /> <section class="container" tabIndex="2"> <section class="click">click this</section> <section class="dropdown"> dropdown menu here </section> </section>