时间戳

首页 > 解决方案 > Bootstrap 折叠表动画不起作用

twitter-bootstrap - Bootstrap 折叠表动画不起作用

问题描述

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

解决方案

您遇到的问题是引导程序中的动画不能在非块级元素上运行，例如<td>or <tr>。它将显示和隐藏它，但动画不会运行，因为动画的工作方式取决于元素是display: block. 因此，您可以将内容包装在<td>a 内的元素内<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>

推荐阅读