Question

我正在寻找避免包裹桌子的div块的方法。有谁知道如何将这个块的行为应用到表中？

<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse"
             href="#collapseTwo" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" 
     role="tabpanel" aria-labelledby="headingTwo">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

Answer 1

我给了id数据库example。将href="#collapseTwo"替换为href="#example"以定位数据表。我还包含了一个jQuery脚本来从dataTable中删除类collapse，因为如果我不这样做，那么数据表就会被压缩并且看起来很难看。如果您想检查删除script并查看差异

$("#example").on('shown.bs.collapse', function(){
  $(this).removeClass('collapse');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse" 
             href="#example" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
        <table id="example" class="table table-bordered in">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

折叠表而不是通过Bootstrap折叠div块

1 个答案: