单击外部菜单以在jquery中关闭
单击外部菜单以在jquery中关闭
提问于 2010-05-20 03:08:57
因此，我有一个下拉菜单，可以根据业务需求在单击时显示。将鼠标从菜单上移开后，该菜单将再次隐藏。
但现在我被要求将它留在原处，直到用户单击文档上的任何位置。如何才能做到这一点？
这是我现在所拥有的简化版本：
$(document).ready(function() {
$("ul.opMenu li").click(function(){
$('#MainOptSubMenu',this).css('visibility', 'visible');
});
$("ul.opMenu li").mouseleave(function(){
$('#MainOptSubMenu',this).css('visibility', 'hidden');
});
});
<ul class="opMenu">
<li id="footwo" class="">
<span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
<ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
<li>some</li>
<li>nav</li>
<li>links</li>
</ul>
</li>
</ul> 我尝试了像这样的$('document[id!=MainOptSubMenu]').click(function()，以为它会在菜单之外的任何东西上触发，但它不起作用。
回答 12
Stack Overflow用户
发布于 2013-03-23 01:13:38
答案是正确的，但它将添加一个侦听器，该侦听器将在每次单击页面时触发。为了避免这种情况，您可以只添加一次监听器：
$('a#menu-link').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#menu').toggleClass('open');
$(document).one('click', function closeMenu (e){
if($('#menu').has(e.target).length === 0){
$('#menu').removeClass('open');
} else {
$(document).one('click', closeMenu);
}
});
});编辑:如果你想避免初始按钮上的stopPropagation()，你可以使用这个
var $menu = $('#menu');
$('a#menu-link').on('click', function(e) {
e.preventDefault();
if (!$menu.hasClass('active')) {
$menu.addClass('active');
$(document).one('click', function closeTooltip(e) {
if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
$menu.removeClass('active');
} else if ($menu.hasClass('active')) {
$(document).one('click', closeTooltip);
}
});
} else {
$menu.removeClass('active');
}
});Stack Overflow用户
发布于 2010-05-20 05:25:56
如果在您的情况下使用插件是可以的，那么我建议Ben Alman的clickoutside插件位于here
它的用法就像这样简单：
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});希望这能有所帮助。
Stack Overflow用户
发布于 2013-07-24 22:59:23
我找到了Grsmto's solution的一个变体，Dennis' solution解决了我的问题。
$(".MainNavContainer").click(function (event) {
//event.preventDefault(); // Might cause problems depending on implementation
event.stopPropagation();
$(document).one('click', function (e) {
if(!$(e.target).is('.MainNavContainer')) {
// code to hide menus
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2868582
复制相关文章
相似问题