Question

我希望有人可以帮我解决一个令我困扰的问题。我在页面左侧有一个菜单，由jquery动画打开和关闭。我正在尝试编写代码，通过单击网站上的任何位置来关闭菜单，除了菜单本身：

$(document).on('click', function(event){
  if((".menu").hasClass("menu--open")){
    if(!$(event.target).hasClass("menu")) {
      $(".menu").animate({width: 'toggle'});
      $(".menu").removeClass("menu--open");
    }
  }
}

虽然jquery动画打开和关闭菜单，但我添加了一个类切换以区分菜单是否打开，否则单击页面上的任何位置将打开它而不仅仅是菜单按钮。

动画似乎在其他地方完美地打开和关闭菜单（例如切换它的菜单按钮），但是在这个例子中，我似乎从上面的代码得到的唯一结果和许多其他尝试不仅仅是点击菜单上的任何地方都不要关闭它，但菜单本身的下拉菜单也不起作用。只有打开菜单的按钮仍然有效。

我真的很感激任何帮助！谢谢。

最新代码根据Taplar的建议：

$(document).on('click', function(event){
  if((".menu").hasClass("menu--open")){
    if($(event.target).closest(".menu").length == 0) {
      $(".menu").animate({width: 'toggle'});
      $(".menu").removeClass("menu--open");
    }
  }
}

菜单功能（下拉菜单等）现在可以使用，但在菜单外单击仍然不会关闭它。

试过这个（如果我误解了你的建议，请纠正我）：

$(document).on('click', function(event){
  if((".menu").hasClass("menu--open")){
    console.log($(event.target).closest(".menu").length)
    if($(event.target).closest(".menu").length == 0) {
      $(".menu").animate({width: 'toggle'});
      $(".menu").removeClass("menu--open");
    }
  }
}

此解决方案不会改变任何内容;它的工作原理与我之前的编辑相同。

Answer 1

$(event.target).closest('.menu').length

您可以使用最接近的dom树来查找与选择器匹配的最近父级。它也可以匹配自己。因此，如果你运行它并且长度为0，你点击菜单中没有的东西而不是菜单本身。

Answer 2

您缺少一个 '$' 和一个分号 - 这就是为什么您的代码不起作用，wannere。

单击除element之外的任何位置以关闭元素

2 个答案: