在JQuery中使用toggleClass不一致的CSS格式

Question

我试图通过将它们分配给类然后在CSS中切换它们来切换标题的CSS属性。我有崩溃类，它有一个橙色背景和一个灰色背景的展开类。但是，当我尝试切换类时，标题最初分配给的类只是放大而不切换。类属性看起来正确。

我相信我的CSS代码写得不正确，但我不确定我出错的地方。提前谢谢了！

我的代码如下：

$(document).ready(function() { 
 
    $('#H2_2').click(function() { 
 
    $('#P_5').slideToggle(200); 
 
    $('#H2_2').toggleClass('expand collapse'); 
 
    }); 
 
});

.collapse { 
 
    color: rgb(0, 0, 0); 
 
    display: block; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%; 
 
    font: 13px/33px Montserrat; 
 
    padding: 3px 10px; 
 
} 
 
.expand { 
 
    color: rgb(255, 255, 255); 
 
    display: block; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%; 
 
    font: 13px/33px Montserrat; 
 
    padding: 3px 10px; 
 
}

<h2 id="H2_2"> 
 
    <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a> 
 
</h2> 
 
<p id="P_5"> 
 
    test test 
 
</p> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 1

你设置类 '扩大' 的<a>

<h2 id="H2_2"> 
     <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a> 
    </h2> 

但是，$('#H2_2').toggleClass('expand collapse');

切换 h2

所以正确答案应该是 $('#H2_2>a').toggleClass('expand collapse');

Answer 2

正如迷说，你能解决这个问题，只需拨动类＃H2_2>一，应该工作正常。

我建议你丢掉expand-class并将其设为＃H2_2的默认值，并且只能切换折叠类。在这种情况下，您也可以删除一些定义折叠类的行，因为您只需要取消要修改的样式即可。

$(document).ready(function(){ 
    $('#H2_2').click(function(){ 
     $('#P_5').slideToggle(200); 
     $('#H2_2').toggleClass('collapse'); 
    }); 
}); 

-

#H2_2 { 
    color: rgb(255, 255, 255); 
    display: block; 
    letter-spacing: 1px; 
    text-decoration: none; 
    background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%; 
    font: 13px/33px Montserrat; 
    padding: 3px 10px; 
} 
.collapse { 
    color: rgb(0, 0, 0); 
    background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%; 
} 

-

<h2 id="H2_2"> 
     <a href="#" title="Expand/Collapse">apple apple apple</a> 
    </h2> 

Answer 3

与这两个值创建一个类，并且只替代你需要：

$(document).ready(function() { 
 
    $('#H2_2').click(function() { 
 
    $('#P_5').slideToggle(200); 
 
    $('#H2_2 .default').toggleClass('collapse'); 
 
    }); 
 
});

.default { 
 
    display: block; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    padding: 3px 10px; 
 
    font: 13px/33px Montserrat; 
 
    transition: all 0.3s ease 0s; 
 
} 
 
.expand { 
 
    color: rgb(255, 255, 255); 
 
    background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%; 
 
} 
 
.collapse { 
 
    color: rgb(0, 0, 0); 
 
    background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%; 
 
}

<h2 id="H2_2"> 
 
    <a href="#" title="Expand/Collapse" class="default expand">apple apple apple</a> 
 
</h2> 
 
<p id="P_5"> 
 
    test test 
 
</p> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>