点击外部菜单关闭jquery

Question

所以我有一个下拉菜单，根据业务需求点击显示。鼠标远离后，菜单会再次隐藏。

但是现在我被要求让它保持原状，直到用户点击文档上的任何位置。这如何实现？

这是什么，我现在有一个简化版本：

$(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()以为它会触发任何wasnt菜单，但它没有工作。

Answer 1

看一看的方法中使用这样的问题：

How do I detect a click outside an element?

附上一个click事件文档正文其关闭窗口。将一个单独的点击事件附加到停止传播到文档主体的窗口。

$('html').click(function() { 
    //Hide the menus if visible 
}); 

$('#menucontainer').click(function(event){ 
    event.stopPropagation(); 
}); 

Answer 2

2，你可以调查选项：

• 在菜单的显示，放置一个大的空DIV背后却掩盖了页面的其余部分并给予一对点击事件关闭菜单（及其本身）。这与用于单击背景的Lightbox关联的方法类似，可以在关闭菜单的主体上附加一次性单击事件处理程序。你使用jQuery的'.one（）'。

Answer 3

如果使用插件在你的情况下确定，那么我建议本Alman的clickoutside插件位于here：

它的使用是如此简单：

$('#menu').bind('clickoutside', function (event) { 
    $(this).hide(); 
}); 

希望这会有所帮助。

Answer 4

我想你需要的东西是这样的：http://jsfiddle.net/BeenYoung/BXaqW/3/

$(document).ready(function() { 
    $("ul.opMenu li").each(function(){ 
     $(this).click(function(){ 
      if($(this).hasClass('opened')==false){   
       $('.opMenu').find('.opened').removeClass('opened').find('ul').slideUp(); 
       $(this).addClass('opened'); 
       $(this).find("ul").slideDown(); 
      }else{ 
       $(this).removeClass('opened'); 
       $(this).find("ul").slideUp();    
      } 
     }); 
    });  
}); 

我希望对您有用！

Answer 5

答案是对的，但它会添加一个侦听器，每次在您的页面上发生点击时都会触发该侦听器。为了避免这种情况，您可以添加监听器只是一个时间：

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

Answer 6

这个怎么样？

$(this).mouseleave(function(){ 
     var thisUI = $(this); 
     $('html').click(function(){ 
       thisUI.hide(); 
      $('html').unbind('click'); 
     }); 
    }); 

Answer 7

即使我遇到了同样的情况，我的导师之一把这个想法传达给自己。

step：1点击了我们应该显示下拉菜单的按钮。然后添加以下类名“more_wrap_background”到当前活动页面像下面

$('.ui-page-active').append("<div class='more_wrap_background' id='more-wrap-bg'> </div>"); 

步骤-2然后添加一个点击次数div标签等

$(document).on('click', '#more-wrap-bg', hideDropDown); 

示出，其中hideDropDown是函数被调用来隐藏下拉菜单

第3步和隐藏下拉菜单的重要步骤是，删除您以前添加的类如

$('#more-wrap-bg').remove(); 

我在上面的代码

.more_wrap_background { 
    top: 0; 
    padding: 0; 
    margin: 0; 
    background: rgba(0, 0, 0, 0.1); 
    position: fixed; 
    display: block; 
    width: 100% !important; 
    z-index: 999;//should be one less than the drop down menu's z-index 
    height: 100% !important; 
} 

Answer 8

使用ID删除我发现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 
     } 
    }); 
}); 

Answer 9

$("html").click(onOutsideClick); 
onOutsideClick = function(e) 
{ 
    var t = $(e.target); 
    if (!(
     t.is("#mymenu") ||  //Where #mymenu - is a div container of your menu 
     t.parents("#mymenu").length > 0 
     ) ) 
    { 
     //TODO: hide your menu 
    } 
}; 

，更好地设定只有当你的菜单是可见的，并随时删除监听器菜单被隐藏后的监听器。

Answer 10

我觉得使用mousedown事件而不是点击事件更有用。如果用户使用点击事件点击页面上的其他元素，则点击事件不起作用。在与jQuery的一个（）方法的组合，它看起来是这样的：

$("ul.opMenu li").click(function(event){ 

    //event.stopPropagation(); not required any more 
    $('#MainOptSubMenu').show(); 

    // add one mousedown event to html 
    $('html').one('mousedown', function(){ 
     $('#MainOptSubMenu').hide(); 
    }); 
}); 

// mousedown must not be triggered inside menu 
$("ul.opMenu li").bind('mousedown', function(evt){ 
    evt.stopPropagation(); 
}); 

Answer 11

我用具有相同行为的多个元素在同一个页面此解决方案：

$("html").click(function(event){ 
    var otarget = $(event.target); 
    if (!otarget.parents('#id_of element').length && otarget.attr('id')!="id_of element" && !otarget.parents('#id_of_activator').length) { 
     $('#id_of element').hide(); 
    } 
}); 

stopPropagation（）是一个坏主意，这打破了很多事情的标准行为，包括按钮和链接。

Answer 12

stopPropagation选项不好，因为它们可能会干扰其他事件处理程序，包括其他可能附加了html元素的处理程序的菜单。

这是基于user2989143的回答一个简单的解决方案：

$("html").click(function(event) { 
    if ($(event.target).closest('#menu-container, #menu-activator').length === 0) { 
     $('#menu-container').hide(); 
    } 
}); 

Answer 13

使用 '：可见' 选择。 凡.menuitem是要隐藏元素（S）...

$('body').click(function(){ 
    $('.menuitem:visible').hide('fast'); 
}); 

或者，如果你已经有了一个变种的.menuitem元素（S）...

var menitems = $('.menuitem'); 
$('body').click(function(){ 
    menuitems.filter(':visible').hide('fast'); 
}); 

Answer 14

我有最近面临同样的问题。我写了下面的代码：

$('html').click(function(e) { 
     var a = e.target; 
     if ($(a).parents('.menu_container').length === 0) { 
     $('.ofSubLevelLinks').removeClass('active'); //hide menu item 
     $('.menu_container li > img').hide(); //hide dropdown image, if any 
    } 
    }); 

它对我来说是完美的。