toggleClass divを一度閉じないで開く

Question

リンクをクリックしたときにdivを開いて閉じたいという単純な行があります。私がクリックすると、divはうまく開きます（そして他の開いているdivも閉じます）。しかし、私が再びリンクをクリックすると、divは閉じません！なぜ私は理解できません。どんな助けでも大歓迎です！

HTML：

<a href="../partial-2" id="products"> 
    <div class="products"> 
     <p>products</p> 
    </div> 
</a> 
<div class="row product-options products-house shadow"> 
    <div class="col-sm-6 col-sm-offset-3"> 
     ....content here, removed for brevity.... 
    </div> 
    </div> 

jQueryの：製品・オプションのどれも、およびディスプレイ：アクティブ - 製品のブロック

Answer 1

私のCSSで

$(document).ready(function(){ 
    $("#products").on("click", function(e){ 
    e.preventDefault(); 
    $(".active-product").removeClass("active-product"); 
    $(".products-house.shadow").toggleClass("active-product"); 
}); 

、私はディスプレイを持っています

クラスを削除するときに、:not()疑似クラスセレクタを使用して.products-house.shadow要素を除外します。

$(document).ready(function(){ 
    $("#products").on("click", function(e){ 
    e.preventDefault(); 
    $(".active-product:not(.products-house.shadow)").removeClass("active-product"); 
    //  --------^^^^----------------------^^^^------ 
    $(".products-house.shadow").toggleClass("active-product"); 
});