我想要在单击按钮时显示div,然后如果页面上的任何其他位置(包括原始按钮)除了单击隐藏的div之外,我希望div再次隐藏。
我认为我非常接近,只是无法做对。这是我到目前为止(作为一个基本的例子:
$(".clickme").click(function () {
$(".toggletag").addClass('open');
});
if ( $('.toggletag').hasClass('open') ) {
$("html").click(function () {
$(".toggletag").removeClass('open');
});
}
以下是使用此代码的JSfiddle:http://jsfiddle.net/vgf6g/1/
我首先尝试没有if语句,但当然导致html点击覆盖按钮点击导致div永远不显示。
谢谢!
答案 0 :(得分:5)
// flag : says "remove class when click reaches background"
var removeClass = true;
// when clicking the button : toggle the class, tell the background to leave it as is
$(".clickme").click(function () {
$(".toggletag").toggleClass('open');
removeClass = false;
});
// when clicking the div : never remove the class
$(".toggletag").click(function() {
removeClass = false;
});
// when click event reaches "html" : remove class if needed, and reset flag
$("html").click(function () {
if (removeClass) {
$(".toggletag").removeClass('open');
}
removeClass = true;
});
答案 1 :(得分:3)
我认为这可以满足您的需求:
$(".clickme").click(function (e) {
$('.toggletag').toggleClass('open');
e.stopPropagation()
});
$(document).click(function (e) {
if (! $(e.target).hasClass('toggletag')) $(".toggletag").removeClass('open');
});
如果先点击按钮,则会显示div。如果再次单击它,它会隐藏。
如果您点击隐藏的div,现在可以查看它不会隐藏。
如果您点击隐藏的任何其他位置。
答案 2 :(得分:2)
这有效:
$(document).click(function (e) {
$el = $(e.target);
if ($el.hasClass('toggletag')) {return false;}
else if($el.hasClass('clickme')) {
$(".toggletag").toggleClass('open');
} else {
$(".toggletag").removeClass('open');
}
});
答案 3 :(得分:1)
像
$(".clickme").click(function (e) {
e.stopPropagation();
$(".toggletag").toggleClass('open');
});
$(document).click(function (e) {
if(!$(e.target).closest('.toggletag').length){
$(".toggletag").removeClass('open');
}
});
演示:Fiddle