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

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

在线样本： http ： //jsfiddle.net/evGd6/

 
click me
 
something I want to show
​ 

 $(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内开始的任何点击事件.showup将被阻止进一步向上进行DOM树，因此永远不会到达document 。

您还需要停止对按钮的任何点击，直至到达document ：

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

否则，单击事件将冒泡到document并导致立即隐藏.showup 。

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