Question

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

我在“点击”中遇到了类似的问题。之前的功能（因为事件仅在第一次点击时发生），我仍然无法弄清楚。非常感谢帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

首先，事件监听器不在checkbox上，当您将其放在checkbox 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>

Answer 2

您的所有答案都很有帮助！这是我自己的错误哈哈。当导航淡入时，它覆盖了我的#burger（导航不是完全不透明的。）在使用z-index后，我设法解决了它。非常感谢你！

FadeToggle / SlideToggle只能使用一次

2 个答案: