Javascript 添加类并清除非同级元素的所有其他实例
我希望能够在单击时添加accordion减号类,同时清除除此之外的所有元素上的所有类实例。目前它正在工作,但只有当我一个接一个地切换时,如果我从一个切换到另一个,它才会断开。 这是我的标记: HTMLJavascript 添加类并清除非同级元素的所有其他实例,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我希望能够在单击时添加accordion减号类,同时清除除此之外的所有元素上的所有类实例。目前它正在工作,但只有当我一个接一个地切换时,如果我从一个切换到另一个,它才会断开。 这是我的标记: HTML 最简单的方法可能是从所有内容中删除该类,然后将其添加到所需的元素中。我有点搞不清楚你到底想做什么,js提琴可能会有所帮助。你能在没有不必要的细节的情况下设置一个示例JSFIDLE吗? <div class="panel-group panel-group-pdp" id="accordion
最简单的方法可能是从所有内容中删除该类,然后将其添加到所需的元素中。我有点搞不清楚你到底想做什么,js提琴可能会有所帮助。你能在没有不必要的细节的情况下设置一个示例JSFIDLE吗?
<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>
$(".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');
}
});