Question

我的页面上有一个元素，可以通过单击文本链接来打开和关闭。当用户点击元素本身之外的页面上的ANYWHERE时，我还需要隐藏元素 - 这是我的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');
            }
        });
    });
});

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

Answer 2

我认为您需要为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();
  }); 
});

Answer 3

您需要检查是否

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

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

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

Answer 5

向BODY标记添加一个单击处理程序，该标记将向上滑动元素并将event.stopPropagation（）添加到首先打开元素的元素，以便单击打开不会发送到BODY。

Answer 6

您可以向文档添加侦听器（因为事件冒泡，您可以在父元素中捕获它）

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

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

6 个答案: