javascript - 单击页面上的任意位置时关闭元素

Question

我的页面上有一个元素，可以通过单击文本链接来打开和关闭。当用户单击元素本身之外的页面上的任何位置时，我还需要隐藏该元素 - 这是我的 jQuery 代码 - 有人可以告诉我要进行哪些修改以执行我需要的操作吗？

$(function() {
$("#header-translate ul li").click(function() {
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500); 
});
});

Answer 1

使用 jQuery's one function非常适合这个。

$(function() {
    $("#header-translate ul li").click(function(e) {
        e.preventDefault();
        var $toClose = $("#header-translate li ul")
        $toClose.slideToggle(500, function() {
            if($toClose.is(':visible')) {
                $('body').one('click', function(e) {
                    e.preventDefault();
                    $toClose.slideUp(500);
                });
            }
            else {
                $('body').unbind('click');
            }
        });
    });
});

这将确保此点击处理程序只执行一次，并且仅在元素显示时执行。