bootstrap 手风琴默认全部折叠

Question

我正在尝试做一个手风琴 collapse/fold 但是我并没有把它设置为一个依据，如果手风琴效果很麻烦，标准 collapse/fold 很好但是我希望它最初显示所有字段都已折叠。

请记住，我正在循环创建每一个，这可能无关紧要，因为我可以添加不同的 ID，class 在第一个循环中没问题，但值得一提。

所以我有这个：

<div class="row">
    <div class="panel-group" id="accordion">


        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Title1
                    </a>
                </h5>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Title2
                    </a>
                </h5>
            </div>
            <div id="collapse2" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        Title3
                    </a>
                </h5>
            </div>
            <div id="collapse3" class="panel-collapse collapse in">
                <div class="panel-body">
                    Content3
                </div>
            </div>
        </div>
    </div>
</div>

然后我有以下脚本

<script>
$(function() {

var $active = true;

$('.panel-title > a').click(function(e) {
e.preventDefault();
});

$('.collapse-init').on('click', function() {
    if(!$active) {
       $active = true;
       $('.panel-title > a').attr('data-toggle', 'collapse');
       $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
       $(this).html('Click to disable accordion behavior');
    } else {
       $active = false;
       $('.panel-collapse.in').removeClass('in');
       $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
       $('.panel-title > a').removeAttr('data-toggle');
       $(this).html('Click to enable accordion behavior');
    }
});

        });
</script>

我在 chrome 编辑器中弄乱了它，尝试编辑 class 从折叠到折叠，反之亦然，但似乎没有什么能迫使它全部折叠.一个永远保持开放。

Answer 1

只需从您的 <div id="collapse1" class="panel-collapse collapse in"> 中删除 in class

        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Title1
                    </a>
                </h5>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">
                    Content1
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Title2
                    </a>
                </h5>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    Content2
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        Title3
                    </a>
                </h5>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    Content3
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap 手风琴默认全部折叠

bootstrap accordion have all collapsed by default

php

accordion

twitter-bootstrap-3