javascript - 如何使用 jQuery 删除一个类

Question

我有一个 Accordion ，当我单击面板时，它会切换几个类(.chevron--down、.chevron--up 和 .borderLeft)。当我打开和关闭同一个面板时它工作正常，但是当我点击不同的面板时它不会从之前点击的面板中删除类。

我尝试添加和删除类而不是切换它们。但它不起作用。

$(".chevAcc, .card-header").on('click', function(ev) {
  ev.preventDefault();
  $(this).toggleClass('chevron--down chevron--up borderLeft');
})

.borderLeft {
  border-left: 4px solid #2196f3;
}

.chevron--down,
.chevron--up {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  <div class="card-header" id="headingEight" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
    <a class="chevron--down chevAcc">
      <svg width="20" height="20" version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
<g class="chevron__container">
<line class="chevron__line1" x1="10" y1="50" x2="50" y2="50" />
<line class="chevron__line2" x1="90" y1="50" x2="50" y2="50" />
</g>
</svg>
    </a>
    <h2 class="mb-0"><button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">FAQs</button></h2>
  </div>
  <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordionExample">
    <div class="card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
      denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</div>

我希望每当我单击任何面板时，类都会适当切换，并且之前单击的元素中的类会被删除。

Answer 1

选择当前面板以外的所有面板，并按照关闭面板应有的方式设置它们的类。

$(".chevAcc, .card-header").on('click', function(ev) {
  ev.preventDefault();
  $(".chevAcc, .card-header").not(this).removeClass('chevron--up borderLeft').addClass('chevron--down');
  $(this).toggleClass('chevron--down chevron--up borderLeft');
})