Question

我正在尝试手风琴折叠/折叠但是我没有设置它是一个相应的，标准折叠/折叠是好的如果手风琴效果很麻烦但我希望它最初显示所有字段折叠。

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

所以我有这个：

<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>

然后我有以下脚本

jeffa

我在chrome编辑器中乱用它来尝试编辑从崩溃到崩溃的类，反之亦然，但似乎没有任何东西强迫它崩溃它们。一个人总是保持开放。

Answer 1

只需从in移除<div id="collapse1" class="panel-collapse collapse in">课程

        <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手风琴都已折叠

1 个答案: