解决Bootstrap 4嵌套手风琴打开子项时关闭父手风琴的问题

这个坑我之前踩过！问题出在手风琴的分组标识（data-bs-parent）没有区分层级——如果主手风琴和嵌套手风琴用了同一个data-bs-parent值，它们会被判定为同一组，所以操作嵌套项时会触发整个组的折叠逻辑，导致主手风琴被意外关闭。

核心解决方案 #

给主手风琴和每一层嵌套手风琴分别设置独立的父容器ID，让每组手风琴只在自己的父范围内管理折叠状态，互不干扰。下面是基于Bootstrap 5的完整实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层级独立的嵌套手风琴</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <!-- 主手风琴容器 -->
        <div class="accordion" id="main-accordion">
            <!-- 主手风琴项1 -->
            <div class="card">
                <div class="card-header" id="main-heading-1">
                    <h2 class="mb-0">
                        <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#main-collapse-1" aria-expanded="true" aria-controls="main-collapse-1">
                            主手风琴项1
                        </button>
                    </h2>
                </div>
                <div id="main-collapse-1" class="collapse show" aria-labelledby="main-heading-1" data-bs-parent="#main-accordion">
                    <div class="card-body">
                        主手风琴内容1
                        <!-- 嵌套手风琴容器 -->
                        <div class="accordion mt-3" id="nested-accordion-1">
                            <div class="card">
                                <div class="card-header" id="nested-heading-1-1">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#nested-collapse-1-1" aria-expanded="true" aria-controls="nested-collapse-1-1">
                                            嵌套手风琴项1-1
                                        </button>
                                    </h2>
                                </div>
                                <div id="nested-collapse-1-1" class="collapse show" aria-labelledby="nested-heading-1-1" data-bs-parent="#nested-accordion-1">
                                    <div class="card-body">
                                        嵌套内容1-1
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="nested-heading-1-2">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link btn-sm collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nested-collapse-1-2" aria-expanded="false" aria-controls="nested-collapse-1-2">
                                            嵌套手风琴项1-2
                                        </button>
                                    </h2>
                                </div>
                                <div id="nested-collapse-1-2" class="collapse" aria-labelledby="nested-heading-1-2" data-bs-parent="#nested-accordion-1">
                                    <div class="card-body">
                                        嵌套内容1-2
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主手风琴项2 -->
            <div class="card">
                <div class="card-header" id="main-heading-2">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-collapse-2" aria-expanded="false" aria-controls="main-collapse-2">
                            主手风琴项2
                        </button>
                    </h2>
                </div>
                <div id="main-collapse-2" class="collapse" aria-labelledby="main-heading-2" data-bs-parent="#main-accordion">
                    <div class="card-body">
                        主手风琴内容2
                        <!-- 另一个嵌套手风琴容器 -->
                        <div class="accordion mt-3" id="nested-accordion-2">
                            <div class="card">
                                <div class="card-header" id="nested-heading-2-1">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#nested-collapse-2-1" aria-expanded="true" aria-controls="nested-collapse-2-1">
                                            嵌套手风琴项2-1
                                        </button>
                                    </h2>
                                </div>
                                <div id="nested-collapse-2-1" class="collapse show" aria-labelledby="nested-heading-2-1" data-bs-parent="#nested-accordion-2">
                                    <div class="card-body">
                                        嵌套内容2-1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键细节说明 #

• 主手风琴的所有折叠面板（collapse）的data-bs-parent都指向主容器#main-accordion，确保主手风琴组内的项互斥折叠
• 每个嵌套手风琴有自己独立的容器ID（比如#nested-accordion-1），其内部折叠面板的data-bs-parent指向这个专属容器，这样嵌套组内的操作只会影响自身，不会触发主手风琴的折叠逻辑
• 如果需要多层嵌套，只需要重复这个逻辑：给每一层嵌套手风琴分配唯一的父容器ID，并设置对应的data-bs-parent

这样修改后，你打开嵌套手风琴的项时，主手风琴的当前项就不会被意外关闭啦！

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