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

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。

Answer 2

on函数只接受一个回调函数。你应该把逻辑隐藏或显示在一个函数中。

类似的东西：

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

jQuery onclick不显示nav

2 个答案: