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

首先，我将添加到您的链接类，例如ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:ECDHE-RSA-AES128-SHA";：

class="link"

之后，尝试下面的jQuery代码：

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

我为此制作了jsFiddler，以便您可以检查这是否是您想要的 - https://jsfiddle.net/o2gxgz9r/8261/。

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

Answer 3

你可以使用这个JQuery：

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

选择除<{1}}以外的所有。

单击任意位置删除类jQuery

3 个答案: