javascript - jquery .not 阻止 nav 隐藏

Question

我觉得我以前见过这个话题，但我找不到它......我一直看到很多讨论 stopPropagation 的 5 年前的答案......

单击主菜单按钮时会弹出一个菜单。如果我单击文档上的其他任何位置，我希望关闭菜单。如果单击菜单按钮或菜单，我不希望发生这种情况...我已经阅读了 .not() 但我觉得我使用了错误。

我没有在 nav 中缺少类选择器 - 它是 html5。它只是按预期弹出我的菜单，但一旦显示就立即隐藏它。

这里是不是少了什么？谢谢!

显示导航(工作中)

$(document).ready(function(){
    $(document).on('click', '.main-menu-button', function(e){
        e.preventDefault();
        //$('nav').animate({width: 'toggle'});
        $(this).toggleClass('active');
        $('nav').slideToggle('fast');
    });
});

隐藏导航

$(document).ready(function(){
    $(document).on('click', function(){
        $('.main-menu-button').removeClass('active');
        $('nav').hide('fast');
    }).not('.main-menu-button, nav');
});

html

<header>
<h1>Jimmy's Junk</h1>
<img src = 'http://localhost/inv/img/framework/menu.png' class = 'main-menu-button'>
<nav>
    <ul>
        <li><a href = 'http://localhost/inv'>dashboard</a></li>
        <li><a href = '#'>reports</a></li>
        <li><a href = '#'>settings</a></li>
        <?=$admin?>
        <li><a href = 'http://localhost/inv/modules/login/php/logOut.php'>log out</a></li>
    </ul>
</nav>
<div class = 'clear'></div>
</header>

Answer 1

$(document).on('click', function(event) {
  if ($(event.target).not('.main-menu-button, nav')) {
    $('nav').hide('fast');
  }
});