单击外部时如何关闭滑动div？答案

【问题标题】：How to make a closing a sliding div when you click outside of it?单击外部时如何关闭滑动div？
【发布时间】：2013-09-08 09:04:34
【问题描述】：

请帮帮我！我创建了一个简单的滑块，并试图在您单击页面上的任何位置时将其关闭，但滑动“黑色”内容除外。

参见 JSFiddle：jsfiddle.net/2DaR6/233/

Javascript

$(".black ").hide();
$(".white").show();
$('.white').click(function(){
    $(".black ").slideToggle(150);
});

HTML

<div class="black">
    content
</div>

<a href="#" class="white">click me!</a><br />

【问题讨论】：

标签： jquery click slide slidetoggle collapse

【解决方案1】：

可能是这样的http://jsfiddle.net/HE2Qg/

$(".black ").hide().click(function(){
    return false;
});
$(".white").show().click(function(){
    $(".black ").slideToggle(150);
    return false;
});
$(document).click(function(){
    $(".black ").slideUp(150);
});

【讨论】：

【解决方案2】：

试试这个。

http://jsfiddle.net/7QNnJ/1/

$(".black ").hide();
$(".white").show();
$('.white').click(function(e){
    $(".black ").slideToggle(150);
    e.stopPropagation();
});

$(document).on('click', function(e){
    if( !$('.black').is(":hover")){
        $('.black').slideUp();
    }
});

【讨论】：

【解决方案3】：

您需要更改点击功能：

$('.white').click(function(event) {
  $(".black ").slideToggle(150);
  event.stopPropagation();
});

并添加这两个函数：

$(".black").click(function(event) {
  event.stopPropagation();
});

$("html").click(function() {
  $(".black").slideToggle(150);
});

这样，如果您单击页面上的任意位置，html 的单击处理程序将尝试关闭 div。但是，如果您点击div 或“点击我”链接，event.stopPropagation() 将阻止事件到达html 的点击处理程序。

Here is a demo

【讨论】：