Bootstrap 折叠表动画不起作用答案

【问题标题】：Bootstrap Collapse table animation won't workBootstrap 折叠表动画不起作用
【发布时间】：2021-07-13 01:07:25
【问题描述】：

我是一个正在学习的初学者。我想做一个简单的项目，我在其中使用引导程序来制作一个可扩展的表格，但是当我单击可折叠的 td 时，它只是展开和关闭而没有任何效果。我想了解发生了什么冲突。

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import "../../node_modules/bootstrap/js/src/collapse.js";

const UserList = (props) => {

    return (
        <div >
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Mail</th>
                        <th colSpan="3" scope="col">Contacts</th>
                    </tr>
                </thead>
                <tbody>
                    {props.users.map((user, i) => (

                        <Fragment>

                            <tr key={i} data-toggle="collapse"
                                data-target={".multi-collapse" + i}
                                aria-controls={"multiCollapseExample" + i}  >
                                <th scope="row">{user.id}</th>
                                <td>{user.name}</td>
                                <td>{user.mail}</td>
                                <td>{user.contact}</td>
                                <td><Link type="button"
                                    to={`edit/${user.id}`}
                                    className="btn btn-md btn-outline-primary"
                                >Edit</Link></td>
                                <td><button className="btn btn-md btn-outline-danger" data-target={i} onClick={(event) => props.deleteUserProp(user)}>Delete</button></td>
                            </tr>

                            <tr className={"collapse multi-collapse" + i} id={"multiCollapseExample" + i} >
                                <td colSpan="6" className="collapsible clearfix" >
                                    <div className="coldiv" >  <h4> Address:</h4><p>{user.body}</p></div>
                                </td>
                            </tr>
                        </Fragment>
                    ))}
                </tbody>
            </table>
        </div>
    )
}
export default UserList;

【问题讨论】：

标签： twitter-bootstrap collapse

【解决方案1】：

您遇到的问题是引导程序中的动画无法在<td> 或<tr> 等非块级元素上运行。它将显示和隐藏它，但动画不会运行，因为动画的工作方式取决于元素 display: block。因此，您可以将 <td> 元素内的内容包装在 <div> 内，然后将 collapse 类添加到 <div>。

<tr>
    <td>
        <div id="element-id-to-identify-on-collapse-control" class="collapse">
            <p>This element would be hidden and the animation will run</p>
        </div>
    <td>
<tr>

【讨论】：