Jquery - 点击按钮添加类 / 点击页面主体删除类

Question

我有一个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永远不会显示。

谢谢！

- BlueCaret

Answer 1

// 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;
});

http://jsfiddle.net/vgf6g/3/

- LeGEC

---

谢谢大家！我采用了你们的答案，因为它允许我在toggletag内部再放置一个div，并且仍然能够点击内部div以防止其关闭。 - BlueCaret

Answer 2

我认为这个可以满足你的需求： http://jsfiddle.net/ch94M/2/

$(".clickme").click(function (e) {
    $('.toggletag').toggleClass('open');
    e.stopPropagation()
});

$(document).click(function (e) {
    if (! $(e.target).hasClass('toggletag')) $(".toggletag").removeClass('open');
});

1. 如果您首先点击按钮，则会显示该div。如果再次单击它，则会隐藏。

2. 如果您单击现在可见的隐藏div，则不会隐藏。

3. 如果您单击其他任何地方，则会隐藏。

- sberry

Answer 3

这个有效：

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

演示 在这里

- Sergio

---

这正如预期的那样工作。我删除了我的答案。 - Sunny R Gupta

Answer 4

喜欢

$(".clickme").click(function (e) {
    e.stopPropagation();
    $(".toggletag").toggleClass('open');
});

$(document).click(function (e) {
    if(!$(e.target).closest('.toggletag').length){
        $(".toggletag").removeClass('open');
    }
});

演示：Fiddle

- Arun P Johny