我希望能够在点击时添加类accordion-minus
,同时清除除this
之外的所有元素的所有类实例。目前它正在工作,但只有我逐个切换,如果我从一个到另一个,它会中断。
这是我的标记:
HTML
<div class="panel-group panel-group-pdp" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.productDetailsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">{{content.static.productDetailsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body panel-body-pdp">
<ul>
{{#each content.product.details}}
<li>{{text}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.deliveryReturnsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{content.static.deliveryAndReturnsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body panel-body-pdp">
<p>
{{content.static.standardDeliveryText}}
</p>
<p>
{{content.static.expressDeliveryText}}
</p>
<p>
{{content.static.freeReturnsText}}
</p>
<p>
{{content.static.moreDeliveryInfoText}}
</p>
</div>
</div>
</div>
</div>
JS
$(".pdp-accord-toggle").click(function() {
if($('.accordion-plus').hasClass('accordion-minus') === false) {
// $(this).find('.accordion-plus').not(this).removeClass('accordion-minus');
$(this).find('.accordion-plus').addClass('accordion-minus');
} else {
$(this).find('.accordion-plus').removeClass('accordion-minus');
}
});