Boostrap 3崩溃-基于崩溃状态链接图标

Boostrap 3 Collapse - Chaining icons based on collapse state

本文关键字:崩溃 状态 链接 图标 于崩溃 Boostrap      更新时间:2023-09-26

首先是小提琴: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();
    }
});

像这样修改你的第一段代码:

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

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

检查JSFiddle Demo