默认折叠此面板

Question

需要这个面板默认折叠，当前页面加载时它是打开的。我试过用谷歌搜索东西，但似乎没有任何效果。

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-title">

               Subcontractors
            <ul class="panel-tools">
                <li><a class="icon minimise-tool no-print"><i class="fa fa-minus"></i></a></li>
            </ul>
        </div>
        <div class="panel-body table-responsive" class="panel-collapse collapse">

            <table id="subcontractor_table" class="table table-striped">
                <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td width="200px">Hours Quoted</td>
                        <td width="200px">Rate</td>
                        <td width="200px">Amount Quoted</td>
                        <td width="100px">Actions</td>
                    </tr>
                </thead>
                <tbody id="subcontractor_table_body"></tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

您需要将data-toggle="collapse" 和data-target="#[YOURDIV]" 添加到您的链接中，以便它知道要折叠什么。

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-title">
            Subcontractors
            <ul class="panel-tools">
                <li><a class="icon minimise-tool no-print" data-toggle="collapse" data-target="#collapsible"><i class="fa fa-minus"></i></a></li>
            </ul>
        </div>
        <div id="collapsible" class="panel-body table-responsive panel-collapse collapse">

            <table id="subcontractor_table" class="table table-striped">
                <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td width="200px">Hours Quoted</td>
                        <td width="200px">Rate</td>
                        <td width="200px">Amount Quoted</td>
                        <td width="100px">Actions</td>
                    </tr>
                </thead>

                <tbody id="subcontractor_table_body"></tbody>
            </table>

        </div>
    </div>
</div>
<!-- End Subcontractors Panel -->

这里，我在 div 中添加了id="collapsible"，并在data-target="#collapsible" 中引用了它

编辑：由于您使用的是链接，您还可以将链接的href 设置为#collapsible 并省略data-target：

<a class="icon minimise-tool no-print" data-toggle="collapse" href="#collapsible"><i class="fa fa-minus"></i></a>