当点击div的外部时，toggle-隐藏项

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

在线示例：从.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; 
}

2012-12-12 olo

停止事件传播：

$(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隐藏。

2012-12-12 00:58:02 Sampson

回答