Question

我相信这很简单，但仍然痛苦......

当用户折叠它时，我只需要改变boostrap手风琴的标题部分的颜色。因此，当accortion部分折叠时，我想要比其他手风琴标题具有不同的标题颜色，并且当用户点击另一个标题时，这个标题会恢复正常颜色＆＃34;另一种崩溃和变色。

现在，它做了什么，当我点击它时，它会崩溃并很好地改变颜色，但是当我再次点击时，它具有相同的颜色，所以我必须再次点击，再次折叠，但它恢复到默认值颜色，即使它已经崩溃。

我试图测试很多东西，但仍然没有得到正确的结果。

谢谢：）

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">
							<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#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, 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>

单击bootstrap手风琴时显示不同的颜色

1 个答案: