Bootstrap Collapse 不正确地展开表

Posted 2023-03-06

【中文标题】Bootstrap Collapse 不正确地展开表

【英文标题】：Bootstrap Collapse Expands Table Incorrectly

【发布时间】：2016-12-17 12:52:12

【问题描述】：

我正在尝试制作一个引导表，当您单击标题时会展开行，然后在您再次单击标题时再次关闭。

我下面的代码做了我想要它做的事情，但是折叠和关闭的动画还差得很远。

这有点难以解释，但基本上行似乎向下扩展了原始大小的 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

【参考方案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/