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

Question

我正在使用jquery的slidetoggle,想要学习如何showup在DIV之外的任何地方单击时隐藏类.谢谢!

<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立即隐藏.