PHP+Bootstrap可展开表格问题：展开行重复显示所有数据

点击任意行都展开所有折叠内容，核心原因是所有折叠面板使用了相同的选择器/ID，jQuery无法区分要触发哪一个，导致批量执行显示操作。

1. 调整PHP循环代码，为每行生成唯一标识 #

假设你从数据库取出的每条数据有唯一id字段，循环输出表格时，给触发行和折叠内容添加唯一的data-target和id：

<?php
$stmt = $pdo->query("SELECT * FROM your_table");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $uniqueId = 'collapse-' . $row['id'];
?>
<tr data-toggle="collapse" data-target="#<?= $uniqueId ?>" class="clickable-row">
    <td><?= $row['column1'] ?></td>
    <td><?= $row['column2'] ?></td>
</tr>
<tr>
    <td colspan="2">
        <div id="<?= $uniqueId ?>" class="collapse">
            <!-- 该行专属数据 -->
            <p>专属内容：<?= $row['unique_data'] ?></p>
        </div>
    </td>
</tr>
<?php } ?>

关键：用数据的唯一ID拼接出collapse-xxx的唯一标识，确保每行的折叠容器ID不重复。

2. 优化自定义jQuery点击事件（若不用Bootstrap原生触发） #

如果是自己写的点击逻辑，要通过当前行的标识定位对应折叠内容，而非全局选中所有.collapse：

$('.clickable-row').on('click', function() {
    var targetId = $(this).data('target');
    // 仅切换当前目标容器的显示状态
    $(targetId).collapse('toggle');
    // 可选：自动关闭其他已展开的容器
    $('.collapse').not(targetId).collapse('hide');
});

常见错误排查 #

• 检查所有折叠容器的id是否重复，可通过浏览器控制台查看元素属性
• 确保data-target的值和对应折叠容器的id完全匹配（含大小写）
• 若使用Bootstrap原生的data-toggle="collapse"，无需额外编写jQuery，只要标识唯一即可正常工作

内容的提问来源于stack exchange，提问作者COPEGUEST