Jquery - 单击按钮添加类/单击正文删除类

Question

我有一个 div，我想在单击按钮时显示该 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 永远不会显示。

谢谢!

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/