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

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>

Answer 2

你可以这样做：

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

$('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 3

你已经隐藏了它，之后你就再也不会显示它了。您正在切换使其扩展的类，但这没有任何意义，因为它不可见。

在切换之前致电$(".app-main-navigation").show();。

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