Question

每当点击一个按钮时，我都会看到div。这就像一个菜单。之后，它会消失（切换），再次单击按钮或用户点击页面上的其他位置（整个身体）时。

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

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

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

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

Here is a fiddle

Answer 1

您可以使用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 2

使用$(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 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

使用类似的东西：

$(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 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点击事件和正文点击事件。因此，如果要查找用户点击的位置，您可以使用 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();
        }
    });
});

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

7 个答案: