单击任意位置删除类 jQuery答案

【问题标题】：Click anywhere remove class jQuery单击任意位置删除类 jQuery
【发布时间】：2017-11-08 10:54:15
【问题描述】：

我正在尝试使用移动打开菜单并通过单击除实际导航项之外的任何位置将其关闭。

这是我的 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"); 
    }                   
  });
});

我做错了什么？？

【问题讨论】：

你会做jsfiddle吗？
您要在哪个事件中删除“mobile-open”类？
event.target.id === 'site-nav 在您的 html 站点导航中是类名

标签： jquery html responsive

【解决方案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");
        }
    });  
});

【讨论】：

【解决方案2】：

你可以使用这个 JQuery：

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

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

【讨论】：

【解决方案3】：

首先，我将添加到您的链接类中，例如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="link" 的情况下让它工作。