如何添加一个加号或减号手风琴在引导?手风琴关闭时显示加号，手风琴打开时显示减号

How to add a plus or minus sign to accordion in bootstrap? display plus when accordion is closed, minus when accordion is opened

本文关键字：手风琴 显示 何添加 添加 一个      更新时间：2023-09-26

我试图添加加号和减号到引导手风琴，当显示内容的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>

无需使用jQuery或javascript。简单的5行CSS就可以做到这一点。对于引导手风琴，一个名为aria-expanded="true"/aria-expanded="false"的属性将被添加到手风琴标题中。你可以根据它添加CSS。请看这个相互依赖的例子

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

这就是你的工作代码。

$('#accordion')
  .on('show.bs.collapse', function(e) {   
     $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-plus');        
     $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-minus');   
  })
  .on('hide.bs.collapse', function(e) {
   $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-minus');
   $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-plus');   
  });

检查下面的JSFiddle

JSFIDDLE 

$('.panel-title > a').click(function() {
  $(this).parents('.panel-default').find('i').toggleClass('fa-plus fa-minus');
  $(this).parents('.panel-default').siblings('.panel-default').find('i').removeClass('fa-minus').addClass('fa-plus')
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <i class="accordion_icon fa fa-minus"></i> Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <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" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <i class="accordion_icon fa fa-plus"></i> Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <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" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <i class="accordion_icon fa fa-plus"></i>Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

相关文章：