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");
});

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

3 个答案: