首先，这里是小提琴：http://jsfiddle.net/krish7878/6xpdeLa6/39/
图标需要根据崩溃/手风琴状态进行更改，我希望始终保持面板打开（用户无法关闭所有手风琴）并拥有必要的JS。但问题是当默认面板打开并且用户点击它时手风琴不会关闭但图标会改变。这与初始的js有关。我不是非常通过javascript，任何帮助将是欣赏。
HTML代码：
<div class="sub-menu-1 panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
FASHION
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Man
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Women
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Children
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Infants
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div>
</div><!-- /#collapseOne -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
SPORTS
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-normal sub-menu-list">
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Gear
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Sports Shoes
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Discounted Stuff
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-chevron-right"></i>
Other Option 3
</a>
</li>
</ul><!-- /.sub-menu-list -->
</div><!-- /.panel-body -->
</div><!-- /#collapseTwo -->
</div><!-- /.panel -->
</div><!-- /.sub-menu-1 -->
JS代码：
$(document).ready(function(){
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading a').click(function(){
$('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
$(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
$(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
});
});
// Keeps at least one collapse panel open
$('.panel-heading a').on('click',function(e){
if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
e.preventDefault();
e.stopPropagation();
}
});
答案 0 :(得分：2)
修改你的第一部分代码：
$(document).ready(function(){
$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading a').click(function(){
if(!$(this).parents('.panel').children('.panel-collapse').hasClass('in')){
$('.panel').find('.collapse.in').prev().find("i").addClass("fa-plus").removeClass("fa-minus");
$(this).parents('.panel-heading').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
$(this).parents('.panel').find('.collapse.in').prev().find("i.fa-minus").removeClass("fa-minus").addClass("fa-plus");
}
});
});
添加的if语句：
if(!$(this).parents('.panel').children('.panel-collapse').hasClass('in'))
检查点击面板是否已打开，如果图标尚未打开，请更改图标。