javascript - 在不影响导航按钮的情况下单击元素外部时尝试关闭移动菜单(删除类)

Question

我真的很努力地完成这项工作。我有一个移动菜单，单击标题中的按钮即可打开。 这将向菜单添加一个事件类以显示它。我已将其设置为全宽并锁定滚动。但是我希望在菜单外单击时关闭它(删除类)，但我无法让它工作。

这是我试过的:

<script> 
jQuery(document).click(function(event) { 
if(!jQuery(event.target).closest('.navgrid .site__header--mobilenav, .burgerbox').length) {
    if(jQuery('#mobilenavcontainer').hasClass('site__header--mobilenav-active')){
    jQuery('jQuery').removeClass('site__header--mobilenav-active')
}

}        
}); 
</script>

但是好像不行...

Answer 1

一个简单的示例，但我认为可以满足您的要求。 按钮显示菜单。单击菜单外的任意位置可将其隐藏。

$(document).mouseup(function(e) {
  const container = $(".menu"); /* Assign outside which element must be clicked */
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $(".menu").css("display", "none");
  }
});

$("body").on("click", "button", function() {
  $(".menu").css("display", "flex");
});

ul {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  flex-flow: column wrap;
  display: none;
}
li {
background-color: lightblue;
border: thin solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<ul class="menu">
  <li>Option 1</li>
  <li>Option 1</li>
  <li>Option 1</li>
</ul>