jquery - FadeToggle/SlideToggle 只能工作一次

Question

我正在尝试创建一个抽屉导航，单击时会淡出/淡入。在 jQuery 代码中，我使导航在加载时隐藏，当我单击汉堡图标时，它会淡入。但是，当我再次单击它时，它不会淡出。

我之前在“点击”功能上遇到过类似的问题(因为该事件仅在第一次点击时发生)，但我仍然无法弄清楚。非常感谢您的帮助!

$(document).ready(function() {
  $('#topnav ul').hide()
  $('#burger').click(function() {
    $('#topnav ul').fadeToggle(300);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="title">
  <input type="checkbox" id="checkboxfornav">

  <nav id="topnav">   
    <label id="burger" for="checkboxfornav">
      <div id="topline"></div>
      <div id="midline"></div>
      <div id="botline"></div>
    </label>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a class="works" href="#">Works</a></li>
      <li><a class="news" href="#">News</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

首先，事件监听器不在复选框上，当您将其放在复选框上时，fadeToggle 就会起作用。

$(document).ready(function() {
  $('#topnav ul').hide()
  $('#checkboxfornav').change(function() {
       $('#topnav ul').fadeToggle($(this).is(":checked"));
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="title">
  <input type="checkbox" id="checkboxfornav">

  <nav id="topnav">   
    <label id="burger" for="checkboxfornav">
      <div id="topline"></div>
      <div id="midline"></div>
      <div id="botline"></div>
    </label>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a class="works" href="#">Works</a></li>
      <li><a class="news" href="#">News</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>