单击任意位置删除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"); 
    }                   
  });
});

我做错了什么？

- Riad Kilani

---

你能制作JSFiddle吗？ - Angelzzz

您想在哪个事件上删除“mobile-open”类？ - guradio

event.target.id === 'site-nav' 在你的HTML中，site-nav是类名。 - XYZ

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/。

- tmucha

---

谢谢，那个方法有效。我成功地让它工作了，而且没有使用 class="link" 这个属性。 - Riad Kilani

Answer 2

以下是您的代码：

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

- Angelzzz

Answer 3

你可以使用这个 JQuery：

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

选择除了.site-nav之外的所有内容。

- James Douglas