附加到$（“a”）选择器的jquery效果不起作用

Question

汉堡包菜单图标

我希望应用于蓝色“叠加”（当点击右上角的汉堡菜单图标时首先向下滑动）的fadeOut效果不适用于附加到实际的$（“a”）元素链接，即前三个链接 - 但它适用于“特价”，“常见问题解答”和“联系我们”链接 - 目前没有链接到任何页面）。谁能告诉我为什么？谢谢。* / **

$(document).ready(function() {

  $("#toggleSwitch").on("click", function() {
    $("#overlay").slideDown(1000);
  });

  $("a").on("click", function() {
    $("#overlay").fadeOut(1000);
  });

}); //endReady

  /* Overlay Nav----------------- */

@media only screen and (max-width: 749px) {
  #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #1181bd;
    display: none;
  }
  #toggleSwitch {
    position: fixed;
    top: 16px;
    right: 16px;
  }
  
  #overlay li {
    list-style-type: none;
  }
  #overlay a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
    text-align: center;
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="overlay">
  <ul class="ulTopMargin">
    <li><a href="index.html">HOME</a></li>
    <li><a href="howItWorks.html">LAUNDRY LIMO</a></li>
    <li><a href="otherServices.html">OTHER SERVICES</a></li>
    <li><a href="#">SPECIALS</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="aboutUs.html">ABOUT US</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</nav>

<img src="img/menuIcon.png" alt="#" id="toggleSwitch"><img src="img/logo.png" alt="Mini Mall Laundromat Logo" class="logo">

Answer 1

有一种可能的解决方案：

$(document).ready(function() {

  $("#toggleSwitch").on("click", function() {
    $("#overlay").slideDown(1000);
  });

  $("a").on("click", function(e) {
    e.preventDefault();
    var href = $(this).data("href");
    $("#overlay").fadeOut(1000, function () { self.location = href; });
  });

}); //endReady

  /* Overlay Nav----------------- */

#overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #1181bd;
    display: none;
  }
  #toggleSwitch {
    position: fixed;
    top: 16px;
    right: 16px;
  }
  
  #overlay li {
    list-style-type: none;
  }
  #overlay a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="overlay">
  <ul class="ulTopMargin">
    <li><a href="#" data-href="index.html">HOME</a></li>
    <li><a href="#" data-href="howItWorks.html">LAUNDRY LIMO</a></li>
    <li><a href="#" data-href="otherServices.html">OTHER SERVICES</a></li>
    <li><a href="#">SPECIALS</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#" data-href="aboutUs.html">ABOUT US</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</nav>

<img src="img/menuIcon.png" alt="#" id="toggleSwitch"><img src="img/logo.png" alt="Mini Mall Laundromat Logo" class="logo">

Answer 2

您需要在e.preventDefault();内使用$("a")，如下所示： -

      $(document).ready(function() {

  $("#toggleSwitch").on("click", function() {
    $("#overlay").slideDown();
  });

  $("a").on("click", function(e) {
      e.preventDefault();
    $("#overlay").fadeOut();
  });

}); //endReady
            

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="overlay">
  <ul class="ulTopMargin">
    <li><a href="index.html">HOME</a></li>
    <li><a href="howItWorks.html">LAUNDRY LIMO</a></li>
    <li><a href="otherServices.html">OTHER SERVICES</a></li>
    <li><a href="#">SPECIALS</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="aboutUs.html">ABOUT US</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</nav>

<img src="https://i.stack.imgur.com/z6OOd.png" alt="#" id="toggleSwitch"><img src="img/logo.png" alt="Mini Mall Laundromat Logo" class="logo">

实际上$("a")无法正常工作，因为$("#toggleSwitch")是锚标记的父级，并且有工作父级并阻止孩子工作，因此您需要将e.preventDefault();与锚标记一起使用

Answer 3

您应该使用e.preventDefault()，这是event.preventDefault()的缩写。

当用户点击一个锚点（链接）时，它会创建和事件，该事件的默认行为是遵循该锚点的href属性。

因此，通过将e或event作为属性添加到click function，您可以控制该事件的行为。在您的情况下，使用e.preventDefault()将阻止锚的默认行为（这是我上面提到的）。因此忽略它，您可以将其他行为传递给锚点上的click事件，例如打开叠加层。

在此处查看更多信息 - ＆gt; MDN preventDefault

$(document).ready(function() {

  $("#toggleSwitch").on("click", function() {
    $("#overlay").slideDown(1000);
  });

  $("a").on("click", function(event) {
    event.preventDefault()
      $("#overlay").fadeOut( "1000", function() {
       console.log(this)
    });
  });

}); //endReady

/* Overlay Nav----------------- */

@media only screen and (max-width: 749px) {
  #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #1181bd;
    display: none;
  }
  #toggleSwitch {
    position: fixed;
    top: 16px;
    right: 16px;
  }
  
  #overlay li {
    list-style-type: none;
  }
  #overlay a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="overlay">
  <ul class="ulTopMargin">
    <li><a href="index.html">HOME</a></li>
    <li><a href="howItWorks.html">LAUNDRY LIMO</a></li>
    <li><a href="otherServices.html">OTHER SERVICES</a></li>
    <li><a href="#">SPECIALS</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="aboutUs.html">ABOUT US</a></li>
    <li><a href="#">CONTACT US</a></li>
  </ul>
</nav>

<img src="img/menuIcon.png" alt="#" id="toggleSwitch"><img src="img/logo.png" alt="Mini Mall Laundromat Logo" class="logo">

如果您想在淡出后发生某些事情，例如转到链接的href

$("#overlay").fadeOut( "1000", () => {
  // animation finished here
  window.location.href = $(this).attr('href')
});

同样使用arrow function () => {}，因此this的上下文保持不变，它会引用a而不是overlay，这将是默认