javascript - 通过单击切换开关外部关闭导航

Question

我已经摆弄这个有一段时间了，但无法真正使其按预期工作...所以，我想在单击切换按钮外部时关闭导航，我尝试了一些使用 stopPropagation() 解决方案，但并没有真正理解它是如何工作的。有人可以提供解决方案并简要解释一下如何实现吗？非常感谢您的帮助!

我已经尝试过使用 stopPropagation 的解决方案

Click outside menu to close in jquery

但它只在第一次起作用，隐藏菜单后就不会再次切换..

$(".app-toggle-menu").on('click', function() {
      $(".app-main-navigation").toggleClass("app-main-navigation--expanded");
});

$('html').click(function() {
   $(".app-main-navigation").hide();
});

$('.app-toggle-menu').click(function(event){
   event.stopPropagation();
});

.app-main-navigation {
  background: grey;
  display: none;
}

.app-main-navigation--expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="app-toggle-menu">
  toggle
</button>

<nav class="app-main-navigation">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</nav>

Answer 1

使用 jQuery 的 removeClass() 方法而不是 hide()。

$(".app-toggle-menu").on('click', function() {
      $(".app-main-navigation").toggleClass("app-main-navigation--expanded");
});

$('html').not(".app-toggle-menu").click(function() {
   $(".app-main-navigation").removeClass("app-main-navigation--expanded");
});

$('.app-toggle-menu').click(function(event){
   event.stopPropagation();
});

.app-main-navigation {
  background: grey;
  display: none;
}

.app-main-navigation--expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="app-toggle-menu">
  toggle
</button>

<nav class="app-main-navigation">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</nav>