javascript jQuery“单击时显示/隐藏div”和“单击外部以隐藏”不能一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16885938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery "show/hide div on click" and "click outside to hide" not working together
提问by Phuong Nguyen
// I searched but no luck, so I start a new question :)
// 我搜索了但没有运气，所以我开始了一个新问题 :)
I have:
我有：
<a class="icon hide-text" id="btnNoti5" href="#">Notification</a>
<a class="icon hide-text" id="btnNoti5" href="#">Notification</a>
I want that: When I click on this a, it will show/hide a div and when I click outside that div, if it is visible, it hides.
我想要的是：当我点击这个时a，它会显示/隐藏一个 div，当我在那个 div 之外点击时，如果它是可见的，它就会隐藏。
I use this code to show/hide. It works fine:
我使用此代码来显示/隐藏。它工作正常：
var divNotifi = $('#divNotifi');
$('#btnNoti5').click(function(e)
{
if (divNotifi.is(":visible"))
{
divNotifi.hide();
}
else
{
divNotifi.show();
}
}
But when I add this code to hide the div when user click outside, it actually works, but above code stopped working: First click, it show the div. Second click: Nothing happens. The div wasn't hidden as expected.
但是当我添加此代码以在用户单击外部时隐藏 div 时，它确实有效，但上面的代码停止工作：首先单击，它显示 div。第二次点击：没有任何反应。div 没有按预期隐藏。
$(document).mouseup(function (e)
{
var container = $("#divNotifi");
if (container.has(e.target).length == 0)
{
container.hide();
}
});
Please help me. Thank you very much.
请帮我。非常感谢你。
采纳答案by Hugo Mallet
Use the same event in order to stop its propagation
使用相同的事件以停止其传播
$(document).click(function (e)
{
var container = $("#divNotifi");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
$('#btnNoti5').click(function(e)
{
if (divNotifi.is(":visible"))
{
divNotifi.hide();
}
else
{
divNotifi.show();
}
return false;
});
回答by adeneo
$(document).on('click', function(e) {
var elem = $(e.target).closest('#btnNoti5'),
box = $(e.target).closest('#divNotifi');
if ( elem.length ) { // the anchor was clicked
e.preventDefault(); // prevent the default action
$('#divNotifi').toggle(); // toggle visibility
}else if (!box.length){ // the document, but not the anchor or the div
$('#divNotifi').hide(); // was clicked, hide it !
}
});
回答by Eliran Efron
There is a trick i like to use for thing such as this.
我喜欢用一个技巧来处理这样的事情。
in the jQuery library:
在 jQuery 库中：
$('#div').addClass('Class-Name');
whenever it is shows - add a class named "show".
每当它显示时 - 添加一个名为“show”的类。
and than for checking if it shows:
而不是检查它是否显示：
if ($('#div').hasClass('Class-Name') )
{
// some actions
}
the .hasClass()is also a part of the jQuery library.
and the last function from the jQuery library is: .removeClass()
这.hasClass()也是 jQuery 库的一部分。来自 jQuery 库的最后一个函数是：.removeClass()
so what i am doing is:
所以我正在做的是：
when show - add class "show" on click - check if has class "show" and than remove class.
显示时 - 单击添加类“显示” - 检查是否有类“显示”，然后删除类。
hope you will find your way of using my trick :)
希望你能找到你使用我的技巧的方法:)
it makes it very easy to do things when they are so graphic. not much would like my method - but i do, it keeps you away from the mess.
当它们如此图形化时，它使做事变得非常容易。不太喜欢我的方法 - 但我喜欢，它让你远离混乱。
回答by bob
$("#btnNoti5").click(function(){
$("#notify").show();
});
$("#notify").click(function(){
$("#notify").hide();
});
