collpase並擴展所有bootstrap 3手風琴

Question

我的代碼可以工作到：當我點擊折疊或展開它全部工作並更改按鈕文本從全部展開以展開全部。 唯一的問題是：當我通過點擊標題打開或關閉所有面板時，它也應該更改按鈕的文本。

我希望我已經清除了我的問題。

在這個例子中，我沒有包含Jquery和bootstrap外部文件。 但您可以在以下鏈接中找到示例。

jsfiddle這里的例子。

jQuery的

     $('.expand-all').click(function(){
     var $this = $(this);
     $this.toggleClass('collapse-all');
     if($this.hasClass('collapse-all')){
     $this.text(' Expand All');
     $('.panel-collapse.in')
     .collapse('hide');
     } 
     else {
     $this.text('Collapse All');
     $('.panel-collapse:not(".in")')
     .collapse('show');
     }
     });

HTML

 <div class="container">
                    <!-- <a href="#" class="btn btn-default openall">open all</a> <a href="#" class="btn btn-default closeall">close all</a>--><a href="#" class="btn btn-default expand-all">Collapse All</a>
                    <hr>
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                                <h4 class="panel-title">
                                    <a class="" >
                                        Collapsible Group Item #1
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    ONe
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                                        Collapsible Group Item #2
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    Two 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">
                                <h4 class="panel-title">
                                    <a class="" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
                                        Collapsible Group Item #3
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    Three 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>
                </div>

Answer 1

這將解決您的問題

$(".panel-heading a").click(function(){
    setTimeout(function(){
        if($(".collapsed").length == $(".panel-heading").length){
            $(".btn-default").text(' Expand All');
          if(!$('.expand-all').hasClass('collapse-all')){
               $('.expand-all').addClass('collapse-all')
           }
        }else{
            $(".btn-default").text('Collapse All');
        }
    },100)    
})

這里的小提琴http://jsfiddle.net/26hu7o5y/4/

Answer 2

怎么樣這個 ？

碼：

$('.expand-all').click(function(){
    var $this = $(this);
    if($this.hasClass('collapse-all')){
        $this.text(' Expand All');
        $('.panel-collapse.in').collapse('hide');
        $this.removeClass('collapse-all');
    } else {
        $this.text('Collapse All');
        $('.panel-collapse:not(".in")').collapse('show');
        $this.addClass('collapse-all');
    }
});

$('#accordion').on('show.bs.collapse hide.bs.collapse', function (obj) {
    var $this = $(this);
    var $expand = $('.expand-all');
    if(obj.type=="show"){
        $expand.text('Collapse All').addClass('collapse-all');
    }
    else{
        if($('.collapse.in').not(obj.target).length == 0){
            $expand.text('Expand All').removeClass('collapse-all');
        }
    }
});

還要向按鈕添加collapse-all類

<a href="#" class="btn btn-default expand-all collapse-all">Collapse All</a>