单击任何地方删除类jQuery

Question

我正在尝试使用移动设备的菜单，并单击其他任何地方，除了实际的导航项目。

这是我的html

<nav class="site-nav">
  <ul>
    <li><a title="About Riad Kilani - Front End Developer" href="#">About</a></li>
    <li><a title="Portfolio of Riad Kilani - Front End Developer" href="#">Portfolio</a></li>
    <li><a title="Front End Development News and Tutorials from Riad Kilani" href="#">Blog</a></li>
    <li><a title="Contact Riad Kilani" href="#">Contact</a></li>
  </ul>
</nav>
<div id="content">
  <section id="featured">
    <a href="#" class="mobile-button"><i class="fa fa-bars">&nbsp;Site Name</i></a>
  </section>
</div>

这是我的JS

$(document).ready(function(e) {
  $(".mobile-button").click(function() {
    $("#content").addClass("mobile-open");
  });
  $(document).click(function(event){
    if (event.target.id === 'site-nav') {
    } else {
        $("#content").removeClass("mobile-open"); 
    }                   
  });
});

我在做什么错？

Answer 1

首先，我将添加到您的链接类中，例如class="link"：

<nav class="site-nav">
  <ul>
    <li><a class="link" title="About Riad Kilani - Front End Developer" href="#">About</a></li>
    <li><a class="link" title="Portfolio of Riad Kilani - Front End Developer" href="#">Portfolio</a></li>
    <li><a class="link" title="Front End Development News and Tutorials from Riad Kilani" href="#">Blog</a></li>
    <li><a class="link" title="Contact Riad Kilani" href="#">Contact</a></li>
  </ul>
</nav>
<div id="content">
  <section id="featured">
    <a href="#" class="mobile-button"><i class="fa fa-bars">&nbsp;Site Name</i></a>
  </section>
</div>

之后，尝试以下jQuery代码：

$(document).ready(function(e) {
    $(".mobile-button").click(function(event) {
        $("#content").addClass("mobile-open");
        event.stopPropagation();
    });
    $(document).click(function(event){
        if (!$(event.target).hasClass('link')) {
            $("#content").removeClass("mobile-open");
        }
    });
});

我为此做了jsfiddler，因此您可以检查是否是您想要的-https：//jsfiddle.net/o2gxgz9r/8261/。

Answer 2

您可以使用此jQuery：

*:not(.site-nav).click(fuction() {
  // code that does stuff
});

选择所有东西除了 .site-nav。

Answer 3

这是您的代码：

$(document).ready(function (e) {
    $(".mobile-button").click(function () {
        $("#content").addClass("mobile-open");
    });
     $(document).click(function (e) {
        if (!$(e.target).is('.site-nav').length) {
            $("#content").removeClass("mobile-open");
        }
    });  
});