Question

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

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

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

2 个答案: