Question

我有一个非常基本的jQuery点击功能，用于切换移动导航菜单的显示 - 由媒体查询触发的汉堡包式 - 如下所示：

// mobile menu click function
$(".mobile-nav-toggle").click(function () {
    $(".mobile-nav-menu").slideToggle();
});

因此，单击.mobile-nav-toggle div会触发位于主标题栏下方的.mobile-nav-menu的外观。我的问题是 - 是否有一种简单的方法可以通过jQuery触发关闭/隐藏菜单，方法是点击/点击在外面菜单本身？目前，只能通过重新点击/点击切换按钮来关闭菜单。

感谢您的任何见解。

Answer 1

您可以将单击处理程序添加到文档本身，如

// mobile menu click function
$(".mobile-nav-toggle").click(function() {
  $(".mobile-nav-menu").slideToggle();
});
$(document).click(function(e) {
  //if the click has happend inside the mobile-nav-menu or mobile-nav-toggle then ignore it
  if (!$(e.target).closest('.mobile-nav-menu, .mobile-nav-toggle').length) {
    $(".mobile-nav-menu").slideUp();
  }
})

body {
  min-height: 100px;
  background-color: lightgrey;
}
.mobile-nav-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="mobile-nav-toggle">Toggle</button>
<div class="mobile-nav-menu">menu
  <div>

Answer 2

这是工作代码

$(".mobile-nav-toggle").click(function (event) {
    event.stopPropagation();
    $(".mobile-nav-menu").slideToggle();
});

$(document).click( function(){
    $('.mobile-nav-menu').hide();
});

jQuery：触发移动导航菜单的关闭

2 个答案: