附加到 $("a") 选择器的 jquery 效果不起作用

Question

汉堡菜单图标

我希望应用于蓝色“叠加层”的淡出效果（单击右上角的汉堡菜单图标时首先向下滑动）不适用于附加到实际的 $("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

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

      $(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() 将防止锚的默认行为（这就是我上面提到的）。因此，忽略它，您可以将其他行为传递给锚点上的单击事件，例如打开叠加层。

在这里查看更多 -> 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