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>

在元素外部单击而不尝试导航按钮时，试图关闭移动菜单（正在删除类）

1 个答案: