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

【问题标题】：toggle- hide item when click outside of the div切换 - 在 div 外部单击时隐藏项目
【发布时间】：2019-01-25 16:27:39
【问题描述】：

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

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

工作正常 :) 谢谢你 :)
如果.showup 部分中有表单，则该表单将永远不会执行
成功了！谢谢！

【解决方案2】：

如果您仍想记录对.showup 面板的点击（假设您希望它不仅仅是一个简单的信息面板），则在点击时调用event.stopPropagation() 将使该面板无法触摸/无用。改用event.cancelBubble = true，让事件发生在.showupchilds。

$('.click').click(function(){
    $(".showup").toggle();
});

$(".showup").on("click", function (/*nothing here*/) {
    event.cancelBubble = true
});

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

【讨论】：