切换- 点击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;
}
    ​

- olo

Answer 1

阻止在 .showup 区域内部的事件传播：

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

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

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

当任何点击事件到达document时，将会隐藏.showup元素。任何从.showup内部开始的点击事件都会被阻止向上传播，并且永远不会到达document。

您还需要阻止按钮上的任何点击事件向上传播到document：

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

否则，该点击事件将冒泡到文档并立即导致.showup的隐藏。

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

- Sampson

---

运行正常 :) 谢谢 :) - user10036985

如果.showup部分内有表单，则该表单将永远不会被执行。 - truongnm

做得好！谢谢！ - Collins

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

- Botea Florin