Javascript Boostrap 3折叠-基于折叠状态链接图标

首先是小提琴：

图标需要根据折叠/手风琴的状态进行更改，我希望始终保持面板打开（用户无法关闭所有手风琴）并具有必要的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();
    }
});

$（文档）.ready（函数（）{
$（“.panel heading+.collapse:not（.in）”）.prev（）.append（“”）；
$（“.panel heading+.collapse.in”）.prev（）.append（“”）；
$（'.panel heading a'）。单击（function（）{
$（'.panel'）.find（'.collapse.in'）.prev（）.find（“i”）.addClass（“fa plus”）.removeClass（“fa减号”）；
$（this）.parents（'.panel heading'）.find（“i.fa-plus”）.removeClass（“fa-plus”）.addClass（“fa-plus”）；
$（this）.parents（'.panel'）.find（'.collapse.in'）.prev（）.find（“i.fa-minus”）.removeClass（“fa-minus”）.addClass（“fa-plus”）；
});
});
//使至少一个折叠面板保持打开状态
$（'面板标题a'）。在（'单击'）上，函数（e）{
if（$（this）.parents（'.panel'）.children（'.panel collapse'）.hasClass（'in'））{
e、 预防默认值（）；
e、 停止传播（）；
}
});

修改第一段代码，如下所示：

$(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");
        }
    });
});

检查单击的面板是否已打开，如果尚未打开，请更改图标

---

我投了赞成票，但当时不允许我选择作为答案，让我等3分钟，现在我投了。

if(!$(this).parents('.panel').children('.panel-collapse').hasClass('in'))