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中，我只有一个display：none用于products-option，而display：block用于active-product

Answer 1

删除课程时，使用 :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");
});

toggleClass一旦打开就不关闭div

1 个答案: