jquery下拉菜单通过点击外部closures
我正在开发一个简单的下拉菜单与jQuery。 当用户按下触发区域时，将切换下拉区域。 我的问题是如何在下拉菜单外单击事件，以便closures下拉菜单？
你可以告诉任何点击，一直到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
如何在下拉菜单外单击事件以closures下拉菜单？ 这里是代码
$(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(); } })
您需要将您的点击事件附加到某个元素。 如果页面上有很多其他元素，则不需要将点击事件附加到所有元素上。
一种可能的方法是在下拉菜单下面创build一个透明的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>
停止事件在某些特定的元素中传播会变得危险，因为它可能会阻止其他一些脚本运行。 因此，检查触发是否来自函数内的排除区域。
$(document).on('click', function(event) { if (!$(event.target).closest('#menucontainer').length) { // Hide the menus. } });
这里的function是在点击文档时启动的，但不包括从#menucontainer触发。 详情请https://css-tricks.com/dangers-stopping-event-propagation/
所选答案仅适用于一个下拉菜单。 对于多个解决scheme将是：
$('body').click(function(event){ $dropdowns.not($dropdowns.has(event.target)).hide(); });
另一个工作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="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>
