Question

尝试学习javascript和jquery，所以请对我这么容易。

问题是，当我点击MENU时，菜单显示但是当我点击BODY时，它不会消失。为什么呢？

<div class="menu">MENU</div>
<nav class="hide-nav">
    <ul>
        <li>Level 1</li>
        <li>Level 1</li>
        <li>Level 1</li>
    </ul>
</nav>

$('.menu').on('click', function(){
  $('nav').removeClass('hide-nav').addClass('show-nav');
});

if ( $('nav').hasClass('show-nav') ) {
  $('body').on('click', function(){
    $(nav).removeClass('show-nav');
  });
}

Answer 1

您需要移动检查＆＃39; show-nav＆＃39;在事件处理程序内部。您还需要将stopPropagation添加到菜单单击处理程序。如果没有这个，也会调用正文点击处理程序并在显示后隐藏菜单。

$('.menu').on('click', function(event) {
  $('nav').removeClass('hide-nav').addClass('show-nav');
  event.stopPropagation();
});


$('body').on('click', function(event) {
  if ($('nav').hasClass('show-nav')) {
    $('nav').removeClass('show-nav').addClass('hide-nav');

  }
});

https://jsfiddle.net/2kr1ftvs/14/

Answer 2

你的if语句不在监听器中，因此它只在加载时运行，然后再也不运行。所以它在技术上有效，但它没有做你想要的。

相反，你需要类似的东西：

$('body').on('click,function(){
    if($('nav').hasClass('show-nav')){
        $('nav').removeClass('show-nav');
        $('nav').addClass('hide-nav');
    }
});

编辑：也就是说，用上面的代码替换if（$（'nav'）。hasClass ...位

动态添加时，hasClass无法正常工作

2 个答案: