javascript - 在div之外单击时切换隐藏项

我正在使用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;
}
    ​

最佳答案

从.showup区域内停止事件传播:

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

然后阻止那些对.showup的点击冒泡到document:

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

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

您还需要停止对按钮的任何点击，也不要停止到达document:

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

否则，该click事件将冒泡到document并立即隐藏.showup。

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

关于javascript - 在div之外单击时切换隐藏项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13831064/