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

font-awesome 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);

Bootstrap手风琴从面板标题+状态指示器切换

1 个答案: