因为我默认打开了第一个面板。我为打开的面板添加了负圆圈，为所有关闭面板的其余部分添加了加圆圈。但是，负圆圈不能在默认打开的面板上工作。我想为打开的面板显示负圆圈＆amp;所有关闭面板的其余部分加上圆圈。
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>
答案 0 :(得分：0)
更改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>
访问以下链接，我刚刚开始
答案 1 :(得分：0)
这是最好的方法。
$('[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>