Question

请帮帮我！我创建了一个简单的滑块，当你点击页面上的任何地方时，我试图让它关闭，除了滑动“黑色”内容。

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

Here is a demo

当你在它外面点击时如何关闭滑动div？

3 个答案: