jquery - 单击外部时如何关闭滑动div？

Question

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

请参阅 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 />

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

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

Answer 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的单击处理程序。

这是一个演示