我正在使用这段代码:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
这个HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
问题是，我有链接在div和当他们不再工作时，点击。
当前回答
(只是添加到prc322的答案。)
在我的例子中，我使用这段代码来隐藏当用户单击适当的选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，即容器外的点击目标不是链接。
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!$("a").is(e.target) // if the target of the click isn't a link ...
&& !container.is(e.target) // ... or the container ...
&& container.has(e.target).length === 0) // ... or a descendant of the container
{
container.hide();
}
});
这是因为我网站上的一些链接为页面添加了新内容。如果在添加新内容的同时导航菜单消失了，用户可能会迷失方向。
其他回答
根据prc322的精彩答案构建。
function hideContainerOnMouseClickOut(selector, callback) {
var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
$(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
var container = $(selector);
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
$(document).off("mouseup.clickOFF touchend.clickOFF");
if (callback) callback.apply(this, args);
}
});
}
这增加了一些东西……
放置在带有“unlimited”参数的回调函数中 添加了对jquery的.off()的调用，与事件名称空间配对，以便在事件运行后将其从文档中解绑定。 包括触摸端移动功能
我希望这能帮助到一些人!
通过使用这段代码，您可以隐藏尽可能多的项目
var boxArray = ["first element's id","second element's id","nth element's id"];
window.addEventListener('mouseup', function(event){
for(var i=0; i < boxArray.length; i++){
var box = document.getElementById(boxArray[i]);
if(event.target != box && event.target.parentNode != box){
box.style.display = 'none';
}
}
})
var exclude_div = $("#ExcludedDiv");; 美元(文档).click(函数(e) { 如果(! exclude_div。Is (e.target)) //如果目标div不是一个你想排除然后添加类隐藏 $ (" .myDiv1 ") .addClass(“隐藏”); })；
小提琴
(只是添加到prc322的答案。)
在我的例子中，我使用这段代码来隐藏当用户单击适当的选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，即容器外的点击目标不是链接。
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!$("a").is(e.target) // if the target of the click isn't a link ...
&& !container.is(e.target) // ... or the container ...
&& container.has(e.target).length === 0) // ... or a descendant of the container
{
container.hide();
}
});
这是因为我网站上的一些链接为页面添加了新内容。如果在添加新内容的同时导航菜单消失了，用户可能会迷失方向。
$(document).ready(function() {
$('.headings').click(function () {$('#sub1').css("display",""); });
$('.headings').click(function () {return false;});
$('#sub1').click(function () {return false;});
$('body').click(function () {$('#sub1').css("display","none");
})});
