Показать другой цвет, когда нажмите на начальной загрузки аккордеона

Question

Я считаю, что это очень простая вещь, но до сих пор страдает ...

мне просто нужно изменить цвет на части заголовка boostrap аккордеона, когда пользователь свернуть. Итак, когда часть аккортинга рухнула, я хочу иметь другой цвет заголовка, чем остальные заголовки аккордеонов, и когда пользователь нажимает на другой заголовок, этот получает «возврат к нормальному цвету», а другой - к краху и изменению цвета.

Теперь, что он делает, что, когда я нажимаю на него, он затухает и красиво меняет цвет, однако, когда я нажимаю снова, он имеет один и тот же цвет, поэтому мне нужно снова щелкнуть, снова свернуть, но он возвращается цвет по умолчанию, даже когда он рухнул.

Я пытался проверить многие вещи, но все равно не получил правильного результата.

Спасибо :)

HTML:

<div class="panel panel-default"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
       <div class="panel-header"> 
       321 
       </div> 
      </a> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
    <div class="panel-opened-area"> 
      123 
    </div> 
    </div> 
</div> 

CSS:

.panel-header { 
     background: #fff; 
     color: $dark; 

.active-time { 
     background: #707070; 
     color: #fff; 
     } 

JQuery:

$('#accordion > .panel').on('show.bs.collapse', function (e) { 
    $(this).find('.panel-header').toggleClass("active-time"); 
}); 

Answer 1

Если я понял вашу проблему, я думаю, что я нашел решение. Look Here.

я помог в некотором роде

$('#accordion .panel').on("click", function() { 
 
    $(this).siblings().find(".panel-heading").removeClass("panel-heading-active"); 
 
    $(this).find(".panel-heading").toggleClass("panel-heading-active"); 
 
});

.panel-heading-active { 
 
    transition: all .5s; 
 
    background-color: green !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading panel-heading-active" role="tab" id="headingOne"> 
 
      <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="panel-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> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingTwo"> 
 
      <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h4> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-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> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
 
\t \t \t \t \t \t \t \t Collapsible Group Item #3 
 
\t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t </h4> 
 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <div class="panel-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> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>