JavaScriptが部分的に動作しない

Question

私は何か間違っていますが、何も見つけられませんか？誰かが私を助けることができれば感謝します。私は私のウェブサイト上で私はそれを試しクラスを削除しますが、その後、それを自動的に実行するために進み、スライダークラスをクリックしたとき、それは

$(".slider").click(function(){ 

    if ($('.sliding_navigation').hasClass('trial')){ 
     $('.sliding_navigation').removeClass('trial'); 
     alert('works'); 

    } 
    else 
    { 
     $('.sliding_navigation').addClass('trial'); 
     alert('even this works'); 
    } 
}); 

問題があるしない私はそれをオンラインでホストたら、それを確認したときに、このJavaScriptコードは完全に正常に動作しますelse文を追加してクラスを追加して、私はこれでサークルで実行していたことに何の効果ももたらさず、どんな助けでも感謝します。 これは私が

<div class="complete_nav"> 

<header class="slider">MENU</header> 

<header class="sliding_navigation trial"> 
    <nav > 

     <ul> 
      <a href="#" ><li class="select"><b>HOME</b></li></a> 
      <a href="aboutme.html"><li><b>ABOUT ME</b></li></a> 
      <a href="from_my_pen.html"><li><b>FROM MY PEN</b></li></a> 
      <a href="books.html"><li><b>BOOKS</b></li></a> 
      <a href="reviews_and_press.html"><li><b>REVIEWS AND PRESS</b></li></a> 
      <a href="contact_me.html"><li><b>CONTACT ME</b></li></a>    
     </ul> 

    </nav> 
</header> 

</div> 

トライアルクラスをターゲットにしていますhtmlコードではnoneに設定されている表示されています。

Answer 1

あなたはこれですべてのことのjavascriptを置き換えることができます。

$(".slider").click(function(){ 
    $('.sliding_navigation').toggleClass('trial'); 
}); 

$ .toggleClass（）のみで、要素が特定のクラスがあり、それがない場合は、それを削除するか、それはdoesnの場合は、それを追加するかどうかをチェックし't。
そして、これはかなりよく私の作品だけを追加：https://jsfiddle.net/LnpLzykp/
はあなたのコードにこれを追加することを忘れないでください：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

EDIT

.trial { 
    display:none; 
} 

このフィドルを参照してください。おそらくあなたのコードにもっと多くのコードがあります。この場合、代わりに次のコードを使用してください：

$(".slider").click(function(){ 
    $(this).parent().find('.sliding_navigation').toggleClass('trial'); 
}); 

このようにすると、.sliderのすぐ下にある.sliding-navigationのクラストライアルのみを切​​り替えるようにjavascriptに指示します。
これを確認してください：https://jsfiddle.net/LnpLzykp/1/
私は新しいコードを説明するために4つのメニューを使用しています。

Answer 2

それは一部の人々がたくさん