Javascript 添加类并清除非同级元素的所有其他实例

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

我希望能够在单击时添加accordion减号类,同时清除除此之外的所有元素上的所有类实例。目前它正在工作,但只有当我一个接一个地切换时,如果我从一个切换到另一个,它才会断开。 这是我的标记:

HTML


最简单的方法可能是从所有内容中删除该类,然后将其添加到所需的元素中。我有点搞不清楚你到底想做什么,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');
  }
});