添加类并清除非兄弟元素的所有其他元素实例

时间:2015-09-09 15:06:30

标签: javascript jquery html twitter-bootstrap

我希望能够在点击时添加类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');
  }
});

0 个答案:

没有答案