javascript - Bootstrap 3 Collapse - 基于折叠状态的链接图标

Question

首先是 fiddle :http://jsfiddle.net/krish7878/6xpdeLa6/39/

图标需要根据折叠/ Accordion 的状态进行更改，我想始终保持面板打开(用户无法关闭所有 Accordion )并且也有必要的 JS。但问题是当默认面板打开并且用户点击它时 Accordion 不会关闭但图标会改变。这跟最初的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();
    }
});

Answer 1

像这样修改您的第一部分代码:

$(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'))

检查点击的面板是否已经打开，如果尚未打开则更改图标。

Check JSFiddle Demo