div向后滑动不起作用答案

【问题标题】：Div slide back up not workingdiv向后滑动不起作用
【发布时间】：2012-08-11 00:40:04
【问题描述】：

当用户点击按钮时...一个 div 向下滑动...

$(document).ready(function(){
    $("#friend_requests_container").click(function(){
        $("#friend_requests").slideDown(500);
    });
});

但是，我想要做的是当用户单击页面上的其他任何位置时，div 会向后滑动，除非他们单击按钮以显示 div。

我尝试的是这个。

$(document).ready(function(){
    $("#friend_requests_container").click(function(){
        $("#friend_requests").slideDown(500);
    }, function(){
        $("#friend_requests").fadeOut(500);
    });
});

但这似乎不起作用... 有任何想法吗？谢谢:)

【问题讨论】：

标签： jquery html click slide

【解决方案1】：

你需要two事件一个friend_requests_container点击和其他document点击，当点击friend_requests_container时，事件是propagated到document click，所以你需要使用stopPropagation()

Live Demo

$(document).ready(function(){
    $("#friend_requests_container").click(function(event){     
        $("#friend_requests").slideDown(500);
                 event.stopPropagation();             
    });

    $(document).click(function(event){
        $("#friend_requests").slideUp(500);
         event.stopPropagation();      
    });   
});

【讨论】：

【解决方案2】：

您可以在文档中附加一个事件并检查被点击元素的 id

$(document).ready(function(){
    $("#friend_requests_container").click(function(){
        $("#friend_requests").slideDown(500);
    });

    $(document).click(function(e){
        if(e.target.id !== "friend_requests_container") {
           $("#friend_requests").slideUp(500);
        }
    });
});

【讨论】：