html - Bootstrap Collapse 错误地展开表

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 试试这样的东西 => http://codepen.io/carlos27/pen/dpdyEb

HTML

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

CSS

.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;
}

JS

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

您也可以使用 jqueryUI => https://jqueryui.com/accordion/