Bootstrap折叠内容点击切换按钮无法收起的问题求助

核心问题分析 #

你的代码存在两个关键问题导致折叠功能异常：JavaScript资源重复/冲突、Accordion结构不符合Bootstrap 5规范。

修复步骤 #

1. 清理冲突的JS资源 #

• Bootstrap 5无需依赖jQuery，直接移除所有jQuery引入
• 同时引入bootstrap.min.js和bootstrap.bundle.min.js会导致组件逻辑冲突，bootstrap.bundle.min.js已包含Popper.js，保留这一个即可

修复后的资源引入代码：

<head>
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
        crossorigin="anonymous"
    />
</head>

<body>
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"
    ></script>
</body>

2. 修正Accordion结构规范 #

Bootstrap 5的Accordion要求每个折叠项必须包裹在.accordion-item容器中，否则data-bs-parent无法正确管理折叠状态。修正后的折叠内容代码：

<div id="accordion">
    <div class="accordion-item">
        <div class="d-flex justify-content-start align-items-center mb-2 accordion-header" id="heading-<%= idName %>">
            <h3 class="me-3"> <%= teamName %> </h3>
            <button class="btn btn-secondary" 
                    type="button"
                    data-bs-toggle="collapse" 
                    data-bs-target="#<%= idName %>" 
                    data-bs-parent="#accordion" 
                    aria-expanded="false" 
                    aria-controls="<%= idName %>">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle-fill" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
                </svg>
            </button>
        </div>
        <div class="collapse" id="<%= idName %>" aria-labelledby="heading-<%= idName %>" data-bs-parent="#accordion">
            <div class="accordion-body">
                <div class="row">
                    <div class="row mt-n1-9">
                        <%- include('./memberCard', {name: "abc", position: "a", imgSrc : "https://bootdey.com/img/Content/avatar/avatar2.png", facebook: "#", insta: "#", linkedIn: "#"}) %>
                        <%- include('./memberCard', {name: "def", position: "b", imgSrc : "https://bootdey.com/img/Content/avatar/avatar2.png", facebook: "#", insta: "#", linkedIn: "#"}) %>
                        <%- include('./memberCard', {name: "ghi", position: "c", imgSrc : "https://bootdey.com/img/Content/avatar/avatar2.png", facebook: "#", insta: "#", linkedIn: "#"}) %>
                        <%- include('./memberCard', {name: "klm", position: "d", imgSrc : "https://bootdey.com/img/Content/avatar/avatar2.png", facebook: "#", insta: "#", linkedIn: "#"}) %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

3. 验证关键细节 #

• 确保模板变量<%= idName %>生成的每个折叠面板ID唯一，且与按钮的data-bs-target完全匹配
• 按钮的aria-expanded初始值保持false，Bootstrap会自动切换该属性状态

完成以上修改后，折叠组件即可正常实现展开/收起功能。

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