Bootstrap按钮折叠功能异常：点击单表单“显示全部”触发所有表单评论展开

我懂你碰到的麻烦了——现在点任意一个表单里的「显示全部」，两个表单的评论都会展开，这是因为你所有折叠区块都用了同一个.multi-collapse类，Bootstrap会全局匹配这个类的元素，不管它属于哪个表单。咱们调整一下就能解决：

问题根源 #

你的「显示全部」按钮用了data-bs-target=".multi-collapse"，这个选择器会选中页面上所有带.multi-collapse类的折叠元素，所以才会同时展开两个表单的评论。

修复方案 #

给每个表单的折叠区块加上专属的类名，让按钮只控制当前表单内的元素：

1. 第一个表单的折叠区块用multi-collapse-form-1类，第二个用multi-collapse-form-2类
2. 对应表单的「显示全部」按钮，把data-bs-target改成指向专属类
3. 保持单个评论按钮的目标ID不变，不影响单独展开功能

修改后的完整代码 #

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/cupertino/jquery-ui.min.css" integrity="sha512-9SEz2+WNpf9iyTy855xgweUvhu8Rz9BnU4d/MBFSFSh4kaAFeCA+/Otj5/NaB9PiMpjO1ajRNbplQTXa182X9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
    <p>&nbsp;</p>
    <form id="messageCodeForm-1" class="row g-3 needs-validation was-validated" novalidate>
        <div class="row">
            <div class="col-6">
                <fieldset class="border p-2">
                    <legend class="float-none w-auto">Form 1 Comments</legend>
                    <div class="row" style="margin-bottom: 10px;">
                        <div class="col">
                            <p class="d-inline-flex gap-1">
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-1" aria-expanded="false" aria-controls="comment-01-1">
                                    Comment 1
                                </button>
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse-form-1" aria-expanded="false" aria-controls="comment-01-1 comment-02-1">Show All</button>
                            </p>
                            <div id="comment-01-1" class="collapse multi-collapse-form-1">
                                <div class="card card-body">
                                    Comment 1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 10px;">
                        <div class="col">
                            <p class="d-inline-flex gap-1">
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-1" aria-expanded="false" aria-controls="comment-02-1">
                                    Comment 2
                                </button>
                            </p>
                            <div id="comment-02-1" class="collapse multi-collapse-form-1">
                                <div class="card card-body">
                                    Comment 2
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <form id="messageCodeForm-2" class="row g-3 needs-validation was-validated" novalidate>
        <div class="row">
            <div class="col-6">
                <fieldset class="border p-2">
                    <legend class="float-none w-auto">Form 2 Comments</legend>
                    <div class="row" style="margin-bottom: 10px;">
                        <div class="col">
                            <p class="d-inline-flex gap-1">
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-01-2" aria-expanded="false" aria-controls="comment-01-2">
                                    Comment 1
                                </button>
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse-form-2" aria-expanded="false" aria-controls="comment-01-2 comment-02-2">Show All</button>
                            </p>
                            <div id="comment-01-2" class="collapse multi-collapse-form-2">
                                <div class="card card-body">
                                    Comment 1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 10px;">
                        <div class="col">
                            <p class="d-inline-flex gap-1">
                                <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#comment-02-2" aria-expanded="false" aria-controls="comment-02-2">
                                    Comment 2
                                </button>
                            </p>
                            <div id="comment-02-2" class="collapse multi-collapse-form-2">
                                <div class="card card-body">
                                    Comment 2
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</body>
</html>

关键修改点说明 #

• 把原来通用的.multi-collapse替换成了表单专属的multi-collapse-form-1和multi-collapse-form-2，确保每个表单的折叠元素不会被其他表单的按钮影响
• 「显示全部」按钮的data-bs-target指向当前表单的专属类，这样点击时只会展开当前表单内的所有评论区块
• 单个评论的按钮依然使用ID选择器，不影响单独展开/折叠的功能

这样调整后，点击第一个表单的「显示全部」只会展开Form 1的评论，第二个表单的按钮也只会控制自己的内容啦！

内容来源于stack exchange