閉じるトグル現在

Question

ナビゲーションリンクをクリックすると、トグルは正常に開き、クリックされたとき、ナビゲーションに「オープン」のCSSを適用します。しかし、私はあなたがメニュー項目をクリックしたときに、クラスを削除するスクリプトを取得することはできません。

通常ので、一度クリックしたため、終了する必要、これは問題にならないだろうが、このメニューは、1ページ内のタグを固定するためにスクロールするために使用されています。ここで

は、私の基本的なマークアップである：それはaddclassを使用していない場合は、あなたはjqueryのの最新バージョンを持っている場合は見ている場合は見ている

$(document).ready(function(){ 
    $("a.toggle").click(function(){ 
     $("nav > ul").slideToggle(500); 
     $(this).toggleClass("open"); 
    }); 
}); 

HTML

<nav id="main"> 
    <a href="#" class="toggle"></a> 
    <ul> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
    </ul> 
</nav> 

Answer 1

とremoeclass代わりの

Answer 2

toggleclassあなたは、メインメニューの表示を切り替えるには、メニュー項目にイベントをクリックして添付することができます。これがあなたが探しているものであることを願っています。

$("#main ul li a").click(function() { 
    $("nav > ul").slideToggle(500); 
    $("a.toggle").toggleClass("open"); 
}); 

$(function() { 
 
    $("a.toggle").click(function() { 
 
\t $("nav > ul").slideToggle(500); 
 
\t $(this).toggleClass("open"); 
 
    }); 
 

 
    $("#main ul li a").click(function() { 
 
\t $("nav > ul").slideToggle(500); 
 
\t $("a.toggle").toggleClass("open"); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav id="main"> 
 
<a href="#" class="toggle">Home</a> 
 
<ul> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
</ul> 
 
</nav>