なぜ私のtoggleClassイベントはそのクラスを追加しますが、それ以降のクリックでそれを削除しないのですか？

Question

私はdisplay：noneという初期状態のドロップダウンメニューを持っています。私はボタンをクリックすると、ドロップダウンメニューが表示され、消えるように、display：blockというクラスを追加するためにtoggleClassイベントを使用しています。

toggleClassはクラスの追加を行いますが、ボタンを再度クリックしてもクラスは削除されません。ブラウザの「inspect要素」ツールを見ると、「アクティブ」クラスが追加されているのがわかりますが、その後のクリックでは「アクティブ」がdivに残ります。クラスは、クリックすると何かを行うと認識されているかのようにまだ点滅しますが、「アクティブ」クラスは削除されません。

関連コードは次のとおりです。 jqueryはうまくいかないので、CSSを必要とすべきではありませんが、参考にしました。

<div class="dropdown"> 
     <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a> 
     <div class="dropdown-content" id="dropdown-services"> 
     <a href="ourwork-advertising.php">Advertising</a> 
     <a href="ourwork-environmental.php">Environmental</a> 
     <a href="ourwork-interactive.php">Interactive</a> 
     <a href="ourwork-logos.php">Logo</a> 
     <a href="ourwork-packaging.php">Packaging</a> 
     <a href="ourwork-print.php">Print</a> 
     </div> 
    </div> 


.dropdown-content { 
    display: none; } 

.active{ 
    display: block; } 


$('#button-services').click(function() { 
    $('#dropdown-services').toggleClass("active"); 

}); 

Answer 1

- 以下を参照してください。しかし、あなたの説明では、clickというイベントハンドラを複数回付けていると思われます。ある時点では、偶数の発射があります。これは、クラスを取り除いて追加します。 clickイベントハンドラのコードはどこにありますか？あなたはfalseを返す場合

$('#button-services').click(function() { 
 
    $('#dropdown-services').toggleClass("active"); 
 
    return false; 
 
});

.dropdown-content 
 
{ 
 
    display: none; 
 
} 
 

 
.active 
 
{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
     <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a> 
 
     <div class="dropdown-content" id="dropdown-services"> 
 
     <a href="ourwork-advertising.php">Advertising</a> 
 
     <a href="ourwork-environmental.php">Environmental</a> 
 
     <a href="ourwork-interactive.php">Interactive</a> 
 
     <a href="ourwork-logos.php">Logo</a> 
 
     <a href="ourwork-packaging.php">Packaging</a> 
 
     <a href="ourwork-print.php">Print</a> 
 
     </div> 
 
    </div>

Answer 2

後）（。あなたは後に、それは私 $（ '＃ボタン-サービス'）の作品をクリックしfalseを返す場合、それは私の の作品クリック（機能をクリックしてください{ $（ '＃dropdown-services'）。toggleClass（ "active"）; falseを返す; }）;