为什么我的 bootstrap 崩溃代码不起作用？

Question

我想在 table 的单元格中显示折叠的 div。

<td>
    <a class="text-decoration-none" data-bs-toggle="collapse" href="{{ '#collapseMsg' ~ message.id }}" role="button" aria-expanded="false" aria-controls="{{ 'collapseMsg' ~ message.id }}">
        <span class="text-dark fw-bold">{{ message.title }}</span>
    </a>
    <div class"collapse mt-2" id="{{ 'collapseMsg' ~ message.id }}">
        <div class="card card-body">
            {{ message.content }}
        </div>
    </div>
</td>

我的代码显示折叠的 div 并且按钮没有隐藏它，但它应该默认隐藏 .collapse class。我包括 bootstrap.min.css 和 bootstrap.js

Answer 1

在两个元素上为 id 使用静态名称，如果可行，请尝试正确映射它们。我不确定我们何时使用 ~ 进行连接。

Answer 2

我把本地的bootstraplink换成了网上的：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

现在可以正常使用了

为什么我的 bootstrap 崩溃代码不起作用？

Why is my bootstrap collapse code not working?

html

javascript

bootstrap-5