トグル機能が動作しない - Jquery

Question

興味深い問題があります。メニュートリガーをクリックすると、クラスがdivに追加されているかどうかを確認した後、表示またはフェードアウトする機能についてのヘルプが表示されました。問題は関数が一度しか実行されないように見えることです。

以下は、私が作ったもののスニペットです。

$(function() { 
 

 
    $('.trigger').click(function() { 
 
     if($('.mainNav').hasClass('showMainNav')) { 
 
      $('.mainNav').fadeOut(100, function() { 
 
       $('.mainNav').removeClass('showMainNav'); 
 
      }); 
 
     } else { 
 
      $('.mainNav').addClass('showMainNav'); 
 
     } 
 
    }); 
 
});

nav { 
 
    height: 70px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: transparent; 
 
    z-index: 1000; 
 
} 
 

 
.nav-fixedWidth { 
 
    width: 95vw; 
 
    height: inherit; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    background-color: inherit; 
 
} 
 

 
.logo-and-trigger { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.logo { 
 
    align-self: center; 
 
} 
 

 
.trigger { 
 
    display: none; 
 
} 
 

 
.mainNav { 
 
    display: flex; 
 
    margin-left: auto; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    z-index: 1000; 
 
} 
 

 
.mainNav>li { 
 
    padding: 23px 14.6px; 
 
    box-sizing: border-box; 
 
    
 
    &:nth-child(6) { 
 
     padding-right: 0; 
 
    } 
 
    
 
} 
 

 
.mainNav>li>a { 
 
    @extend .navText; 
 
    text-decoration: none; 
 
} 
 

 
@media screen and (max-width: 1046px) { 
 
    
 
    .logo-and-trigger { 
 
     width: 100%; 
 
    } 
 

 
    .trigger { 
 
     display: flex; 
 
     align-self: center; 
 
     color: black; 
 

 
     .fa.fa-bars { 
 
      font-size: 35px; 
 
      color:#ccc; 
 
     } 
 
    } 
 
    
 
    .mainNav { 
 
     width: 100%; 
 
     left: 0; 
 
     position: absolute; 
 
     top: 70px; 
 
     width: 100vw; 
 
     height: 100vw; 
 
     flex-direction: column; 
 
     padding-top: 137px; 
 
     background-color: white; 
 
     display: none; 
 
    } 
 
    
 
    .showMainNav { 
 
     display: block; 
 
    } 
 
    
 
    .mainNav>li { 
 
     padding-left: 0; 
 
     margin-left: 0; 
 
     text-align: center; 
 
     padding-bottom: 10px; 
 

 
    }  
 

 
    .mainNav>li>a { 
 
     font-size: 21px; 
 
     color: rgb(102, 160, 253); 
 
     font-weight: normal; 
 
     line-height: 28px; 
 
     text-decoration: none; 
 
    } 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
      <div class="nav-fixedWidth"> 
 
       <div class="logo-and-trigger"> 
 
        <p class="logo">Logo Here</p> 
 
        <div class="trigger"> 
 
         <i class="fa fa-bars" aria-hidden="true"></i> 
 
        </div> 
 
       </div> 
 
       <ul class="mainNav"> 
 
        <li class="navText"><a href="#meetDrive">Meet Drive</a></li> 
 
        <li class="navText"><a href="#usingDrive">Using Drive</a></li> 
 
        <li class="navText"><a href="#pricing">Pricing</a></li> 
 
        <li class="navText"><a href="#download">Download</a></li> 
 
        <li class="navText"><a href="#forWork">For Work</a></li> 
 
        <li class="navText"><a href="#Help">Help</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav>

作られた、誰も私を助けることができますか？

Answer 1

が追加されますCSSプロパティ"display:none"。アニメーションを維持したい場合は、このようなことをする必要があります。

$(function() { 

$('.trigger').click(function() { 
    if($('.mainNav').hasClass('showMainNav')) { 
     $('.mainNav').fadeOut(100, function() { 
      $('.mainNav').removeClass('showMainNav'); 
     }); 
    } else { 
     $('.mainNav').addClass('showMainNav').css("display",""); 
    } 
}); 
}); 

Answer 2

は、以下のコードを使用します。既存のjqueryの関数を使用するtoggleClass

$(document).ready(function(){ 
    $(".trigger").on("click", function() { 
     $(".mainNav").toggleClass("showMainNav"); 
    }); 
}); 

、代わりにあなたのクラスのためのトグルコードを書くの

$('.trigger').click(function() { 
      if($('.mainNav').hasClass('showMainNav')) { 
       $('.mainNav').removeClass('showMainNav'); 
      } else { 
       $('.mainNav').addClass('showMainNav'); 
      } 
     }); 

Answer 3

をデモ：fadeOutを使用してJsFiddle

Answer 4

jQuery fadeOutメソッドは、インラインCSSでは表示を行いません。インラインCSSは、定義されたクラスよりも強いことに注意してください。

あなたは

$(function() {  
    $('.trigger').click(function() { 
     if($('.mainNav').hasClass('showMainNav')) { 
      $('.mainNav').fadeOut(100, function() { 
       $('.mainNav').removeClass('showMainNav'); 
      }); 
     } else { 
      $('.mainNav').fadeIn(100, function() { 
       $('.mainNav').addClass('showMainNav'); 
      }); 
     } 
    }); 
}); 

コード

の下に使用するか、単にjQueryのトグル方法あなたは `showMainNav`クラスを定義している

$(function() { 
    $('.trigger').click(function() { 
     $('.mainNav').toggle(); 
    }); 
});