单击任意位置删除 class 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

这是您的代码：

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

Answer 2

你可以使用这个JQuery:

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

至 select 一切除了 .site-nav。

Answer 3

首先我会添加到您的链接 class，例如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/。

单击任意位置删除 class jQuery

Click anywhere remove class jQuery

html

jquery

responsive