点击页面任意位置关闭元素

Question

我的页面上有一个元素，可以通过单击文本链接来切换显示和隐藏。我还需要在用户单击页面元素以外的任何位置时隐藏该元素，以下是我的jQuery代码-请问有人能帮我修改一下这个代码吗？

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

- Zach Nicodemous

Answer 1

使用jQuery的one函数非常适合这种情况。

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

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

- Adam Terlson

---

当我点击显示的元素内部时，它不是触发到页面链接，而是关闭了该元素 - 我该如何修复这个问题？ - pepe

Answer 2

我相信你需要为 $('body') 添加一个 click() 处理程序，并且还需要在你的元素上添加 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();
  }); 
}); 

- Blazemonger

---

这样做的问题是，每次单击任何地方时都会执行单击处理程序--并不总是最好的行为。你真正应该做的是在需要时绑定和解除绑定body click处理程序，通过jQuery的one轻松实现。请参见下面的答案。 :) - Adam Terlson

我假设该元素在未指定的情况下会再次被 show() 出来。如果不是这样，你的方法肯定更好。 - Blazemonger

Answer 3

你需要检查是否

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

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

- Joseph Silber

Answer 4

我使用了这段代码：

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

- Zach Nicodemous

Answer 5

您可以向文档添加监听器（由于事件会冒泡，因此您可以在父元素中捕获它）

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

- Ortiga

Answer 6

在BODY标签上添加一个点击处理程序，它将向上滑动元素，并在打开元素的元素上添加event.stopPropagation()，以便将打开的单击不发送到BODY。

- margusholland