当 div 在引导手风琴中折叠时添加和删除边框底部颜色

如何解决当 div 在引导手风琴中折叠时添加和删除边框底部颜色

我需要一些有关 bootstrap 手风琴的帮助

我想为项目的标题添加border-bottom-color: red “可折叠组项目” div 打开时
并在 div 关闭时将其删除

我正在尝试通过 Jquery 添加该类，该类将具有 border-bottom-color: red CSS。
但它不起作用，有人能告诉我我错在哪里

预期：
当 div 打开时，类将被添加，否则它将被删除

我编写的代码的结果：
无论是否打开 div，颜色都会同时添加到所有 div

$('.panel').click(function(){ 
    console.log("hi");      
    if ( $('.panel .panel-collapse').hasClass('show') ){ 
        $('.panel .panel-heading').addClass('add-border-bottom');
        console.log("hello");
    } else {
        $('.panel .panel-heading').removeClass('add-border-bottom');
    }
});

body {
  color: #6a6c6f;
  background-color: #f1f3f6;
  margin-top:30px;
}

.container {
  max-width: 960px;
}


/* */

.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.add-border-bottom{
  border-bottom:1px solid red;  
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.6/dist/css/bootstrap.min.css">

<div class="container">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" 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,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">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
</div>

解决方法

如果我理解你，你想在手风琴打开时添加一个红色边框？

Bootstrap 在打开时已经提供了一个类，所以当类不存在时添加样式。

<button class="btn addclass">Toggle class</button>
<div class="block active">
</div>

我已经更新了下面的代码片段

$(document).ready(function(){
  $(window).on('load',function(){
    if($(".addclass .block").hasClass("active")){
      $(this).removeClass("active");
    }
  });
});

$(document).ready(function(){
  $(".addclass").click(function(){
    $(".block").toggleClass("active");
  });
});

.block{
  display: none;
  padding: 50px;
  background-color: red;
}
.block.active{
  display: block;
}

.panel-heading a:not(.collapsed) {
    border-bottom:1px solid red;
}