Bootstrap 折叠 table 动画将不起作用

Question

我是初学者，正在学习中。我想做一个简单的项目，我在其中使用 bootstrap 来制作一个可扩展的 table，但是当我单击可折叠的 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;

Answer 1

您运行遇到的问题是来自 bootstrap 的动画不会运行在非块级元素上，例如 <td> 或 <tr>.它会显示和隐藏它，但动画不会运行，因为动画的工作方式取决于元素 display: block。因此，您可以将 <td> 元素内的内容包装在 <div> 内，然后将 collapse class 添加到 <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>

Bootstrap 折叠 table 动画将不起作用

Bootstrap Collapse table animation won't work

twitter-bootstrap

collapse