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

Question

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

在线示例：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将被阻止在 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();
});