toggleClass未关闭div一次打开

Question

我有一些非常简单的jQuery行，用于在单击链接时打开和关闭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：

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

在我的CSS中，我只有一个显示器:无一个用于产品选项，并显示:块用于活动产品。

Answer 1

删除类时，使用.products-house.shadow伪类选择器排除:not()元素。

$(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");
});