切换 - 在div外部单击时隐藏项目

Question

我正在使用jquery的slidetoggle，想要学习如何在点击DIV之外的任何地方时隐藏showup类。 谢谢！

在线样本： http ： //jsfiddle.net/evGd6/

<div class="click">click me</div>
<div class="showup">something I want to show</div>​

$(document).ready(function(){
    $('.click').click(function(){
        $(".showup").slideToggle("fast");
    });
});​

.showup {
    width: 100px;
    height: 100px; 
    background: red; 
    display:none;
}
.click {
    cursor: pointer;
}
    ​

Answer 1

停止.showup区域内的事件传播：

$(document).on("click", function () {
    $(".showup").hide();
});

然后防止.showup上的那些点击冒泡到document ：

$(".showup").on("click", function (event) {
    event.stopPropagation();
});

到达document任何单击事件都将导致隐藏.showup元素。 从.showup内开始的任何点击事件.showup将被阻止进一步向上进行DOM树，因此永远不会到达document 。

您还需要停止对按钮的任何点击，直至到达document ：

$(".click").on("click", function (event) {
    event.stopPropagation();
    $(".showup").slideToggle("fast");
});

否则，单击事件将冒泡到document并导致立即隐藏.showup 。

演示： http ： //jsfiddle.net/evGd6/2/

Answer 2

如果您仍想记录.showup面板上的点击（假设您希望它更像一个简单的信息面板），单击它时调用event.stopPropagation()将使该面板不可触及/无用。 请改用event.cancelBubble = true并在.showup发生事件。

$('.click').click(function(){
    $(".showup").toggle();
});

$(".showup").on("click", function (/*nothing here*/) {
    event.cancelBubble = true
});

$(document).on("click", function () {
    $(".showup").hide();
});