javascript - jQuery onclick 不显示导航

Question

我看过其他关于这个的帖子，有很多。老实说，我不知道这里发生了什么。

我正在尝试在点击时显示我的“导航”。然而，它现在只是添加我的活跃类(class)。导航不会显示

html结构

<div class="nav-container">
    <div class="nav-handle"><i class="fa fa-bars">nav icon</i></div>

     <nav role="navigation">
          <ul role="menu">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
      </nav>
</div>

CSS

nav {
 display:none;
}

我尝试过的jquery

$(".nav-container").on('click', '.nav-handle', function () {
          $("nav").fadeIn('fast');
          $(".nav-handle").toggleClass('active');
     }, function () {
         $("nav").fadeOut('fast');
         $(".nav-handle").toggleClass('active');
     });

Answer 1

您正在将两个回调分配给 click事件。然而，与hover不同事件，click 事件仅接受单个回调。

它似乎只执行上面的第二个回调。

您可以使用一个fadeToggle，并进行一次回调:

$(".nav-container").on('click', '.nav-handle', function () {
    $("nav").fadeToggle('fast');
    $(".nav-handle").toggleClass('active');
});

这是一个jsFiddle显示此工作。