jquery - div向后滑动不起作用

Question

当用户单击按钮时...一个 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);
    });
});

但这似乎不起作用......有什么想法吗？谢谢 ：）

Answer 1

您需要two一个friend_requests_container单击事件和另一个document单击事件，当单击friend_requests_container 时，事件也是如此propagated，document click因此您需要使用stopPropagation()

现场演示

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

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