自定义图标（加号和减号）在默认扩展面板上不起作用-Bootstrap

Question

由于我已经默认打开了第一个面板。 我为打开的面板添加了负号，为所有关闭的面板添加了正号。 但是，减号圆在默认打开的面板上不起作用。 我想对打开的面板显示负号，对所有关闭的面板显示正号。

 jQuery(function($) { var $active = $('#accordion .panel-collapse.in').prev().find('a').addClass('actives'); $active.find('a').append('<span class="fa fa-minus-circle pull-right"></span>'); $('#accordion .panel-heading').not($active).find('a').prepend('<span class="fa fa-plus-circle pull-right"></span>'); $('#accordion').on('show.bs.collapse', function(e) { $('#accordion .panel-heading.actives').removeClass('actives').find('.fa').toggleClass('fa-plus-circle fa-minus-circle'); $(e.target).prev().find('a').addClass('actives').find('.fa').toggleClass('fa-plus-circle fa-minus-circle'); }); $('#accordion').on('hide.bs.collapse', function(e) { $(e.target).prev().find('a').removeClass('actives').find('.fa').removeClass('fa-minus-circle').addClass('fa-plus-circle'); }); }); 

 .new-buying-requirements{ background-color: #F7F7F7; } .panel-group .panel { border-radius: 0; } .new-requirements-panel-title { font-size: 2.28em; font-family: 'montserrat'; } .panel-heading{ padding: 0px; } .panel-title > a { display: block; padding: 20px; text-decoration: none; background-color: #fff; color: #383F42; } .more-less { float: right; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EEEEEE; } .actives{ background-color: #1E6C97 !important; color: #fff !important; } .panel-group .panel+.panel{ margin-top: 15px; } .new-requirements-panel-group { margin-bottom: 60px; margin-top: 60px; } .media-lft{ padding-top: 5px; padding-right: 16px; } .media-lft>img{ border: 1px solid #ccc; } .media-heading{ color: #1E6C97; } .buying-requirement-media-body>p{ margin-bottom: 0px; font-family: 'montserrat'; font-size: 1.28em; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="new-buying-requirements"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div aria-multiselectable="true" class="panel-group new-requirements-panel-group" id="accordion" role="tablist"> <div class="panel panel-default new-requirements-panel"> <div class="panel-heading new-requirements-panel-heading" id="headingOne" role="tab"> <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Requirements</a></h4> </div> <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel"> <div class="panel-body new-requirements-panel-body"> <div class="media"> <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" style="width:45px; height: 30px;"></div> <div class="media-body buying-requirement-media-body"> <p>A buyer from [Leeds], [UK]</p> <p>posted their [<a class="lnk" data-original-title="" href="#" title="">AKD Emulsions</a>] requirement inviting suppliers to submit quotations</p> </div> </div> </div> </div> </div> <div class="panel panel-default new-requirements-panel"> <div class="panel-heading new-requirements-panel-heading" id="headingTwo" role="tab"> <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Quotations</a></h4> </div> <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel"> <div class="panel-body new-requirements-panel-body"> <div class="media"> <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" style="width:45px; height: 30px;"></div> <div class="media-body buying-requirement-media-body"> <p>A buyer from [UK]</p> <p>requested a quotation from [<a class="lnk" data-original-title="" href="#" title="">99Corporate Inc</a>] in [Beijing], [China]</p> </div> </div> </div> </div> </div> <div class="panel panel-default new-requirements-panel"> <div class="panel-heading new-requirements-panel-heading" id="headingThree" role="tab"> <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Supplier</a></h4> </div> <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel"> <div class="panel-body new-requirements-panel-body"> <div class="media"> <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/memberlogos/1225_logo_beta.jpg" style="width:45px; height: 30px;"></div> <div class="media-body buying-requirement-media-body"> <p>[<a class="lnk" data-original-title="" href="#" title="">VBX Ltd</a>] from [Indonesia] <img align="middle" height="15" src="https://cdn.paperindex.com/piimages/flags/Indonesia.jpg" width="20"></p> </div> </div> <div class="media-body buying-requirement-media-body"> <p>[<a class="lnk" data-original-title="" href="#" title="">iPaper Inc</a>] from [UK] <img align="middle" height="15" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" width="20"></p> </div> </div> </div> </div> </div> <div class="panel panel-default new-requirements-panel"> <div class="panel-heading new-requirements-panel-heading" id="headingFour" role="tab"> <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseFour" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseFour" role="button">Products</a></h4> </div> <div aria-labelledby="headingFour" class="panel-collapse collapse" id="collapseFour" role="tabpanel"> <div class="panel-body new-requirements-panel-body"> <div class="media"> <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/productimages/1075_22052007070008_pic.jpg" style="width:45px; height: 30px;"></div> <div class="media-body buying-requirement-media-body"> <p>[<a data-original-title="" href="#" title="">Kraft Paper</a>] details were added by <a data-original-title="" href="#" title="">KBX Ltd</a> to their company profile</p> </div> </div> <div class="media"> <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/productimages/0_22112016080604_pic.jpg" style="width:45px; height: 30px;"></div> <div class="media-body buying-requirement-media-body"> <p>[<a data-original-title="" href="#" title="">V-belt</a>] details were added by <a data-original-title="" href="#" title="">ABC Paper Pvt Ltd</a> to their company profilV-belte</p> </div> </div> </div> </div> </div> </div><!-- panel-group --> </div> </div> </div> </div> 

Answer 1

更改HTML将跨度如下所示添加并检查

<a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Requirements <span class="fa fa-minus-circle pull-right"></span></a>

访问下面的链接，我只是第一次

https://jsfiddle.net/ay0g6w6t/1/

Answer 2

这是执行此操作的最佳方法。

 $('[data-toggle="collapse"]').click(function(){ $(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 <i class="glyphicon glyphicon-arrow-up"></i> </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" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 <i class="glyphicon glyphicon-arrow-down"></i> </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" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 <i class="glyphicon glyphicon-arrow-down"></i> </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>