javascript - 如何在 Bootstrap 中为 Accordion 添加加号或减号？ Accordion 关闭时显示加号， Accordion 打开时显示减号

Question

我试图在 bootstrap Accordion 中添加加号和减号，当显示内容的 div 打开时显示加号，关闭时显示减号，当我打开第二个选项卡时它应该关闭其他打开的选项卡的内容(这个当前正在发生)并且它应该将减号图标更改为事件选项卡以外的选项卡的加号图标。

非常感谢任何能提供解决方案或方法的人:)。

enter code here
<h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-custom">
     <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </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 panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </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 panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
    </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>

jquery code

<script>

$(document).ready(function() {
 $('.panel-title-custom').addClass('glyphicon glyphicon-plus');

 $('.panel-title-custom').click(function(){
    $(this).toggleClass('glyphicon-plus glyphicon-minus'); 

  });

});

</script>

Answer 1

不需要为此使用 jQuery 或 javascript。简单的 5 行 CSS 就可以为您做到这一点。对于 Bootstrap Accordion ，一个名为 aria-expanded="true"/aria-expanded="false"的属性将被添加到 Accordion 标题中。你可以根据那个添加CSS。 see this codepen example

.accordion-btn {
 position: relative;
}
.accordion-btn:before {
 position: absolute;
 content: "+";
 right: 10px;
 top: 5px;
}
.accordion-btn[aria-expanded="true"]:before {
 content: "-"; }