在其他地方单击时菜单应该消失

Question

我有一个 div，只要单击一个按钮，它应该是可见的。这就像一个菜单。之后，当再次单击按钮或用户单击页面上的其他位置（整个主体）时，它应该消失（切换）。

在我目前的方法中，菜单会不断切换，因此两个功能（见下文）都会被触发。

$("#b1").click(function() {
  $("#menu").toggle("slide");
});

$("body").click(function() {
  if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
});

我应该如何改进我的代码，以便菜单仅在再次单击按钮或用户单击其他地方时消失？

Here is a fiddle.

Answer 1

使用这样的东西：

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Answer 2

您可以使用 e.target 并检查点击的不是菜单或按钮。否则，即使单击按钮或单击内部菜单也会关闭。

$("#b1").click(function() {
    $("#menu").slideDown();
});

$("body").click(function(e) {
    if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
        $("#menu").slideUp();
    } else {
        e.preventDefault();
    }
});

如果您希望菜单在点击内部时保持不变，只需将 && !$(e.target).is("#menu") 添加到 if 条件即可。

Working example.

Answer 3

我觉得你的代码看起来不错。我看到一个问题，当你点击菜单时它会被隐藏。

$("#b1").click(function() {
  $("#menu").toggle("slide");
  return false; // prevent to pass click event to body
});

$("body").click(function() {
  if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
});

$("#menu").click(function(e){
    e.preventDefault();
    return false;
});

Answer 4

使用$(window)附加事件，然后您可以在任何地方关闭菜单。

$("#b1").click(function() {
  $("#menu").toggle("slide");
   return false;
});

$(window).click(function() {
  if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
});

查看演示：https://jsfiddle.net/wru8mvxt/5/

Answer 5

试试这个。

    $("#b1").click(function() {
event.stopPropagation();
  $("#menu").toggle("slide");
});

$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
    $("#menu").toggle("slide");
  }
}

});

Answer 6

我认为这段代码可以解决您的问题。您可以使用 e.target 属性来查找用户是单击按钮还是外部按钮。当用户点击按钮 b1 时，它会同时进入 b1 点击事件 和 body 点击事件 。因此，如果为了找到用户点击的位置，您可以使用 event.target 属性.

单击该按钮将切换菜单可见性。

如果菜单打开，在按钮外单击将关闭菜单。

 $("#b1").click(function() {
    $("#menu").toggle("slide");
    $("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});

$("body").click(function(e) {
  if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
    $("#menu").slideUp();
  } 
  else {
    e.preventDefault();
  }
});

Working fiddle

Answer 7

您必须进行以下更改。

$(document).ready(function() {
    $("#b1").click(function(e) {
        $("#menu").slideToggle();
        e.stopPropagation();
    });
    $(document).click(function(e) {
        if (!$(e.target).is('#menu, #menu *')) {
           $("#menu").slideUp();
        }
    });
});

在其他地方单击时菜单应该消失

Menu should disappear when clicked somewhere else

html

javascript

css

jquery

toggle