blocks|key|1030791|text|如果在您的情况下使用插件是可以的，那么我建议Ben+Alman的clickoutside插件位于here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1030792|它的用法就像这样简单：|1030793|$('#menu').bind('clickoutside',+function+(event)+{
++++$(this).hide();
});|code-block|syntax|javascript|1030794|希望这能有所帮助。|1030795|entityMap|0|LINK|mutability|MUTABLE|url|http://benalman.com/projects/jquery-outside-events-plugin/^0|1C|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

If using a plugin is ok in you case, then I suggest Ben Alman's clickoutside plugin located <a href="http://benalman.com/projects/jquery-outside-events-plugin/" rel="noreferrer">here</a>:

its usage is as simple as this:

<pre><code>$('#menu').bind('clickoutside', function (event) {
 $(this).hide();
});
</code></pre>

hope this helps.

blocks|key|1245827|text|我认为你需要这样的东西：http://jsfiddle.net/BeenYoung/BXaqW/3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1245828|$(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();+++++++++++++++
++++++++++++}
++++++});
++});++++
});|code-block|syntax|javascript|1245829|我希望它对你有用！|1245830|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/BeenYoung/BXaqW/3/^0|C|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I think you need something like this: <a href="http://jsfiddle.net/BeenYoung/BXaqW/3/" rel="nofollow">http://jsfiddle.net/BeenYoung/BXaqW/3/</a>

<pre><code>$(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(); 
 }
 });
 }); 
});
</code></pre>

I hope it useful for you!

blocks|key|1245869|text|答案是正确的，但它将添加一个侦听器，该侦听器将在每次单击页面时触发。为了避免这种情况，您可以只添加一次监听器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1245870|$('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);
++++++++}
++++});
});|code-block|syntax|javascript|1245871|编辑:如果你想避免初始按钮上的stopPropagation()，你可以使用这个|offset|length|style|CODE|1245872|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');
++++}
});|1245873|entityMap^0|0|0|F|H|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The answer is right, but it will add a listener that will be triggered every time a click occurs on your page. To avoid that, you can add the listener for just one time :

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

Edit: if you want to avoid the <code>stopPropagation()</code> on the initial button you can use this 

<pre><code>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 &amp;&amp; $('a#menu-link').has(e.target).length === 0) {
 $menu.removeClass('active');
 } else if ($menu.hasClass('active')) {
 $(document).one('click', closeTooltip);
 }
 });
 } else {
 $menu.removeClass('active');
 }
});
</code></pre>

blocks|key|1030885|text|那这个呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1030886|++++$(this).mouseleave(function(){++
++++++++var+thisUI+=+$(this);
++++++++$('html').click(function(){
++++++++++++++++thisUI.hide();
++++++++++++$('html').unbind('click');
+++++++++});
+++++});|code-block|syntax|javascript|1030887|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

what about this?

<pre><code> $(this).mouseleave(function(){ 
 var thisUI = $(this);
 $('html').click(function(){
 thisUI.hide();
 $('html').unbind('click');
 });
 });
</code></pre>

blocks|key|1031005|text|我找到了Grsmto's+solution的一个变体，Dennis'+solution解决了我的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1031006|$(".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
++++++++}
++++});
});|code-block|syntax|javascript|1031007|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/15576211/2615152|1|https://stackoverflow.com/a/1089622/2615152^0|4|H|0|R|G|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

I found a variant of <a href="https://stackoverflow.com/a/15576211/2615152">Grsmto's solution</a> and <a href="https://stackoverflow.com/a/1089622/2615152">Dennis' solution</a> fixed my issue.

<pre><code>$(".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
 }
 });
});
</code></pre>

blocks|key|1246047|text|$("html").click(+onOutsideClick+);
onOutsideClick+=+function(+e+)
{
++++var+t+=+$(+e.target+);
++++if+(+!(
++++++++t.is("#mymenu"+)+%7C%7C+++++//Where+#mymenu+-+is+a+div+container+of+your+menu
++++++++t.parents(+"#mymenu"+).length+>+0
++++++++)+++)
++++{
++++++++//TODO:+hide+your+menu
++++}
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1246048|最好仅在菜单可见时设置侦听器，并始终在菜单隐藏后删除侦听器。|unstyled|1246049|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("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 &gt; 0
 ) )
 {
 //TODO: hide your menu
 }
};
</code></pre>

And better to set the listener only when your menu is being visible and always remove the listener after menu becomes hidden.

blocks|key|1246075|text|我发现使用mousedown-event比使用click-event更有用。如果用户使用点击事件点击页面上的其他元素，则点击事件不起作用。结合jQuery的one()方法，它看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1246076|$("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();
});|code-block|syntax|javascript|1246077|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I find it more useful to use mousedown-event instead of click-event. The click-event doesn't work if the user clicks on other elements on the page with click-events. In combination with jQuery's one() method it looks like this:

<pre><code>$("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();
});
</code></pre>

blocks|key|1246126|text|我将这个解决方案与同一页面中具有相同行为的多个元素一起使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1246127|$("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();
++++}
});|code-block|syntax|javascript|1246128|stopPropagation()不是一个好主意，它破坏了很多东西的标准行为，包括按钮和链接。|1246129|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I use this solution with multiple elements with the same behavior in the same page:

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

stopPropagation() is a bad idea, this breaks standard behaviour of many things, including buttons and links.

blocks|key|1246169|text|使用“：visible”选择器。其中.menuitem是要隐藏的元素...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1246170|$('body').click(function(){
++$('.menuitem:visible').hide('fast');
});|code-block|syntax|javascript|1246171|或者如果你已经在一个变量中有了.menuitem元素...|1246172|var+menitems+=+$('.menuitem');
$('body').click(function(){
++menuitems.filter(':visible').hide('fast');
});|1246173|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use the ':visible' selector.
Where .menuitem is the to-hide element(s) ...

<pre><code>$('body').click(function(){
 $('.menuitem:visible').hide('fast');
});
</code></pre>

Or if you already have the .menuitem element(s) in a var ...

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

blocks|key|1246183|text|我最近也遇到了同样的问题。我写了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1246184|++++$('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
+++++}
++++});|code-block|syntax|javascript|1246185|它对我来说工作得很完美。|1246186|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I have recently faced the same issue. I wrote the following code:

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

It has worked for me perfectly.

blocks|key|1031183|text|它不需要很复杂。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031184|$(document).on('click',+function()+{
++++$("#menu:not(:hover)").hide();
});|code-block|syntax|javascript|1031185|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It doesn't have to be complicated.

<pre><code>$(document).on('click', function() {
 $("#menu:not(:hover)").hide();
});
</code></pre>

blocks|key|1031215|text|看了这些答案，这就是我最终如何做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031216|​|1031217|$('html').click(function(event)+{

let+openMenuButton+=+$("#menu-open");
let+menu+=+$("#menu-popup");
let+both+=+$('#menu-popup,+#menu-open');

++++if+(+$(event.target).closest(both).length+===+0+)+{++
++++++++$(menu).hide();
++++++++console.log("if+statement");
++++++++
++++}+else+if+(+$(menu).is(":visible")+&&+$(event.target).closest(openMenuButton).length+===+1+){
++++$(menu).hide();
++++console.log("if+ELSE+statement");
++++}+else+{
++++$(menu).show();
++++console.log("ELSE+statement");
++++}
+++
});|code-block|syntax|javascript|1031218|1031219|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Looks through these answers and this is how i ended up doing it
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('html').click(function(event) {

let openMenuButton = $("#menu-open");
let menu = $("#menu-popup");
let both = $('#menu-popup, #menu-open');

 if ( $(event.target).closest(both).length === 0 ) { 
 $(menu).hide();
 console.log("if statement");
 
 } else if ( $(menu).is(":visible") &amp;&amp; $(event.target).closest(openMenuButton).length === 1 ){
 $(menu).hide();
 console.log("if ELSE statement");
 } else {
 $(menu).show();
 console.log("ELSE statement");
 }
 
});</code></pre>
</div>
</div>

So I have a drop-down menu that shows on a click, as per business requirements. The menu becomes hidden again after you mouse away from it.

But now I am being asked to have it stay in place until user clicks anywhere on the document. How can this be accomplished?

This is a simplified version of what I have now:

<pre><code>$(document).ready(function() {
 $("ul.opMenu li").click(function(){
 $('#MainOptSubMenu',this).css('visibility', 'visible');
 });

 $("ul.opMenu li").mouseleave(function(){
 $('#MainOptSubMenu',this).css('visibility', 'hidden');
 });
});



&lt;ul class="opMenu"&gt;
 &lt;li id="footwo" class=""&gt;
 &lt;span id="optImg" style="display: inline-block;"&gt; &lt;img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/&gt; &lt;/span&gt;
 &lt;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;"&gt;
 &lt;li&gt;some&lt;/li&gt;
 &lt;li&gt;nav&lt;/li&gt;
 &lt;li&gt;links&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt; 
</code></pre>

I tried something like this <code>$('document[id!=MainOptSubMenu]').click(function()</code> thinking it would trigger on anything that wasnt the menu, but it didnt work.

Click outside menu to close in jquery

jQuery

因此，我有一个下拉菜单，可以根据业务需求在单击时显示。将鼠标从菜单上移开后，该菜单将再次隐藏。但现在我被要求将它留在原处，直到用户单击文档上的任何位置。如何才能做到这一点？这是我现在所拥有的简化版本：$(document).ready(function() {  $("ul.opMenu li").click(func...

问单击外部菜单以在jquery中关闭
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击外部菜单以在jquery中关闭EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击外部菜单以在jquery中关闭
EN