Bootstrap手風琴可從面板標題+狀態指示器切換

Question

通過嘗試使用不同的CSS和jQuery解決方案，它已經可以工作8個小時了，我能夠找到很多解決方案，但是這些都不滿足我的需求。

我需要將面板標題作為激活的“按鈕”，這樣才能更輕松地打開不同的部分。

沒有可用的方法起作用。 他們不執行任何操作或在手風琴的每個選項卡上激活某些類，但是我只需要在當前激活的選項卡上更改狀態。

下方是一個沒有jQuery的jsfiddle，但我認為我在fontawesome圖標上使用class =“ indicator”進行了很好的標記。

抱歉，如果這是一個簡單的問題，我看起來很傻，但是我確實缺乏JavaScript經驗。

HTML：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
      <h4 class="panel-title">
          Collapsible Group Item #1<i class="fa indicator fa-chevron-up"></i>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
       First group.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" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
      <h4 class="panel-title">
          Collapsible Group Item #2<i class="fa indicator fa-chevron-down"></i>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
      <h4 class="panel-title">
        Collapsible Group Item #3<i class="fa indicator fa-chevron-down"></i>
      </h4>
        </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

CSS：

.panel-default>.panel-heading{background-color: #f5f5f5;border-bottom: 1px solid #fff;}
.panel-default{border: none;}
.panel-group .panel{border-radius: 0;}
.panel{-webkit-box-shadow:none;box-shadow:none;border-left: 1px solid #f5f5f5;}
.panel-group .panel-heading+.panel-collapse>.panel-body{border-top: none;}  
.panel-group .panel+.panel{margin-top: 0;}
.panel-title .fa{color:#87D37C;float: right;}
.panel-heading{border-radius: 0;cursor:pointer;}

_

http://jsfiddle.net/3tweewn1/

Answer 1

字體很棒的css文件沒有鏈接到您的小提琴上，因此我添加了一個不同的cdn鏈接，並且添加了代碼以在實際小提琴上顯示令人敬畏的字體，因此您可以在實際中看到它。 http://jsfiddle.net/Lnws5fop/1/
我不確定您是否真的要在面板標題旁邊放置人字形，所以我添加了“向右拉”，如果需要，可以將其刪除。

function toggleChevron(e) {
$(e.target)
    .prev('.panel-heading')
    .find("i.indicator")
    .toggleClass('fa-chevron-down fa-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);