Question

我正在尝试创建一个Bootstrap表，当您单击标题时会扩展行，然后再次单击标题时再次关闭。

我下面的代码执行了我想要它做的事情但是崩溃和关闭的动画是关闭的。

它有点难以解释，但基本上行似乎向下扩展大约是其原始大小的5倍（文本大小相同但行变大），并且组合的行似乎占用了一半屏幕，然后行缩小回原始大小，然后表格正确显示。这需要大约半秒钟，但它非常明显且分散注意力。在整个动画过程中，表格的宽度保持不变.....只有行的高度才会大幅扩展！

忘了在Internet Explorer 11中提到这一点。在Chrome上根本没有动画。它只是打开和关闭。我需要它才能在Internet Explorer 11上工作，谢谢！

有什么想法吗？

<div class="container-fluid">
<div class="row">
    <div class="col-xs-1">
    </div>

    <div class="col-xs-5">
        <div class="row" style="border:0px;">
            <div style="display:inline-block;padding:0px;">
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr data-toggle="collapse" data-target="#CodeNamesTable" style="color:#FFFFFF;background-color:#854864;">
                            <th style="min-width:60px;">Code</th>
                            <th style="min-width:400px;">Name</th>
                        </tr>
                    </thead>
                    <tbody class="collapse" id="CodeNamesTable">
                            <tr>
                                <td>ABC</td>
                                <td>Notes For ABC Stock</td>
                            </tr>
                            <tr>
                                <td>EER</td>
                                <td>Ordinary Enterprise Readouts</td>
                            </tr>
                            <tr>
                                <td>GRT</td>
                                <td>General Resource Target Funds</td>
                            </tr>
                            <tr>
                                <td>KLI</td>
                                <td>KLI Preference Indicators</td>
                            </tr>
                            <tr>
                                <td>WAW</td>
                                <td>Worldwide Administration Window</td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

这里是JSFiddle

Answer 1

我注意到你的jsfiddle有jquery所以如果你只是想使用jquery尝试这样的东西=＆gt; http://codepen.io/carlos27/pen/dpdyEb

HTML

First Name |Last Name  |Individual Email Address

CSS

<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

JS

.container {
    width:403px;
    border:1px solid #d3d3d3;
}
.container div {
    width:400px;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

您还可以使用jqueryUI =＆gt; https://jqueryui.com/accordion/

Bootstrap Collapse错误地扩展表

1 个答案: