html - 将 "+/-"添加到 Bootstrap Accordion 面板作为切换指示器

Question

我希望组的标题能够展开为列表或树，标题旁边的文本字符默认为“+”，展开时为“-”，并随着列表状态的显示和切换而切换隐藏。

我如何在 bootstrap v.3 中完成它？

http://jsbin.com/jakofugoxe/edit?html,css,output

.panel-heading[data-toggle="collapse"] {
  cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
      <h4 class="panel-title">
        Collapsible Group 1
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
      <h4 class="panel-title">
        Collapsible Group 2
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
      <h4 class="panel-title">
        Collapsible Group 3
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

您可以使用:before 或:after 伪元素来绘制+ 或-:

collapsed 类必须在所有面板内与 .panel-heading 一起使用，但事件面板除外。 Bootstrap js 在单击面板标题时切换此类，我们可以使用它在 + 和 - 之间切换。

HTML:

<div class="panel panel-default">
  <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
                      <!--  ^^^ This class should be present on panel headings
                                inside all panels except the one that is active. -->
    <h4 class="panel-title">Collapsible Group 2</h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet</div>
  </div>
</div>

必要的 CSS:

.panel-default>.panel-heading {
  padding-right: 30px;
  position: relative;
}

.panel-default>.panel-heading:after {
  content: '-';
  position: absolute;
  font-size: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.panel-default>.panel-heading.collapsed:after {
  content: '+';
}

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.panel-heading[data-toggle="collapse"] {
  cursor: pointer;
}

.panel-default>.panel-heading {
  padding-right: 30px;
  position: relative;
}

.panel-default>.panel-heading:after {
  content: '-';
  position: absolute;
  font-size: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.panel-default>.panel-heading.collapsed:after {
  content: '+';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
        <h4 class="panel-title">
          Collapsible Group 1
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
        <h4 class="panel-title">
          Collapsible Group 2
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        <h4 class="panel-title">
          Collapsible Group 3
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>