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

【问题标题】：custom icon(plus-circle & minus-circle) not working on default expanded panel - Bootstrap自定义图标（加号和减号）在默认扩展面板上不起作用 - Bootstrap
【发布时间】：2017-04-22 18:41:29
【问题描述】：

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

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>

【问题讨论】：

是我还是你的例子工作正常？
签出这个答案stackoverflow.com/a/39012302/2724173
它工作不正常。我认为要求的是加载第一个面板的（减号/加号）标识符应该设置为减号，但现在它是加号。
打开的面板上应该有减号图标。加号圆圈图标现在会在那里。
Get the element that was collapsed on hidden/shown.bs.collapse的可能重复

标签： jquery html css twitter-bootstrap

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

例如，请直接点击第二个面板，然后点击第三个面板。现在看第一个和第二个面板。向上箭头图标将在那里。不应该是这样的。相反，向下箭头图标应该在那里。我想要的是，打开面板的向上箭头和关闭面板的向下箭头。