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

我的页面上有一个元素，可以通过单击文本链接来打开和关闭。当用户单击页面上元素本身之外的任何位置时，我还需要隐藏该元素—这是我的jQuery代码—有人能告诉我要做什么修改来满足我的需要吗

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

---

我认为您需要将

click（）

处理程序添加到

$（'body'）

，并将

event.stopPropagation（）

添加到元素中

$(function() { 
  $("#header-translate ul li").click(function(e) {   // don't forget that 'e'
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500);  
    e.stopPropagation(); // so this doesn't register as a body click
  });
  $("body").click(function(e) {
    $("#header-translate").hide();
  }); 
}); 

使用是完美的

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

---

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

将单击处理程序添加到将向上滑动元素并添加事件的主体标记。stopPropagation（）到首先打开该元素的元素，以便单击打开不会发送到正文。

您需要检查

$(function()
{
    var elToHideSelector = "#header-translate li ul";

    $("body").click(function(e)
    {
        if ( ! $(e.target).is(elToHideSelector + ',' + elToHideSelector + ' *') )
        {
            $(elToHideSelector).hide();
        }
    });
});

---

您可以将侦听器添加到文档中（由于事件冒泡，您可以在父元素中捕获它）

我使用了以下代码：

    $(function() { 
  $("#header-translate ul li").click(function(e) {     
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500);  
    e.stopPropagation(); // so this doesn't register as a body click
  });
  $("body").click(function(e) {
      if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
  }); 
}); 

---

这样做的问题是，每次单击任何位置时，您的单击处理程序都会被执行——这并不总是最好的行为。您真正应该做的是仅在需要时绑定和解除绑定body click处理程序，这可以通过jQuery的

one

轻松实现。见下面我的答案。：）我假设在未指定的情况下，元素将再次是

show（）

n。如果没有，您的方法肯定会更可取。当我在显示的元素内单击时，它会关闭元素，而不是触发指向页面的链接-如何修复此问题？

    $(function() { 
  $("#header-translate ul li").click(function(e) {     
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500);  
    e.stopPropagation(); // so this doesn't register as a body click
  });
  $("body").click(function(e) {
      if ($('#header-translate li ul').is(':visible')) { $("#header-translate li ul").hide("slide", { direction: "up" }, 500);}
  }); 
});