Bootstrap 5单选按钮折叠组件异常：双面板同时展开问题求助

问题原因 #

• 单选按钮选中后隐藏：单选按钮的id与折叠面板的id重复，Bootstrap Collapse组件会将匹配data-bs-target的元素折叠，导致单选按钮被误隐藏。
• 折叠面板无法互斥：两个折叠面板未关联到同一父容器，缺乏互斥控制逻辑，导致点击时同时展开。

修复后的代码 #

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="col-md-12 mb-3">
        <label class="form-label">Sector</label>
        <div>
            <div data-bs-toggle="collapse" data-bs-target="#private-panel" data-bs-parent="#sector-collapse-group" aria-expanded="false" aria-controls="private-panel">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sector" id="private-radio" value="0">
                    <label class="form-check-label" for="private-radio">Private</label>
                </div>
            </div>
            <div data-bs-toggle="collapse" data-bs-target="#governmental-panel" data-bs-parent="#sector-collapse-group" aria-expanded="false" aria-controls="governmental-panel">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sector" id="governmental-radio" value="1">
                    <label class="form-check-label" for="governmental-radio">Governmental</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="sector-collapse-group">
        <div class="col-lg-12">
            <div class="collapse" id="private-panel">
                <div class="card card-body">
                    You selected Private.
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="collapse" id="governmental-panel">
                <div class="card card-body">
                    You selected Governmental.
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键修复点 #

1. 解决id冲突：将单选按钮的id改为private-radio、governmental-radio，对应折叠面板的id改为private-panel、governmental-panel，避免元素id重复导致的误折叠。
2. 实现互斥折叠：给两个折叠面板的父容器设置id="sector-collapse-group"，并在每个折叠触发元素上添加data-bs-parent="#sector-collapse-group"，Bootstrap会自动管理该组内的折叠面板，确保同一时间只有一个面板展开。

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