Question

我试图为bootstrap手风琴添加加号和减号，当显示内容的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即可为您完成此操作。对于自举式手风琴，一个名为aria-expanded =“ true” / aria-expanded =“ false”的属性将被添加到手风琴标题中。您可以根据此添加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: "-"; }

Answer 2

这里你去工作代码。

$('#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

Answer 3

$('.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>

如何在bootstrap中为手风琴添加加号或减号？手风琴关闭时显示加，手风琴打开时减去

3 个答案: