jQuery onclick not show nav

Question

我已經看過其他線程，有很多。我真的不知道這裏發生了什麼。

我試圖在點擊時顯示我的'導航'。但是，現在只是添加我的活動課程。導航不顯示

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

​​

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。

Answer 2

on函數只接受一個回調函數。你應該把邏輯隱藏或顯示在一個函數中。

是這樣的：

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