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>

将“+ / - ”添加到Bootstrap折叠式面板作为切换指示器

1 个答案: