javascript - 附加到 $ ("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">