Bootstrap 5.1.3 Accordion无法折叠问题排查求助

我在网站中使用Accordion样式展示系列信息，内容显示正常，但所有Accordion项均无法折叠。请问是Accordion类配置缺失，还是HTML头部需添加额外依赖链接？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="accordion" id="accordionPanelsStayOpen">
    <?php
    #kblah display
    foreach($contents as $line) {
        $kblah = substr($line, 5, -6);
        $kblahLowerCase = strtolower($kblah);
        $kblahLocation = getKblahLocation($kblahLowerCase);
        $blah1 = getblah1($kblahLowerCase);
        $blah2 = getblah2($kblahLowerCase);
        if (substr($kblah, -1) == "_") {
            continue;
        }
        else {
            ?>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-<?php echo $kblah ?>">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse<?php echo $kblah ?>" aria-expanded="true" aria-controls="panelsStayOpen-collapse<?php echo $kblah ?>"><?php echo $kblah ?></button>
                </h2>
                <div id="panelsStayOpen-collapse<?php echo $kblah ?>" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-<?php echo $kblah ?>">
                    <div class="accordion-body">
                        <div class="d-flex justify-content-evenly">
                            <h4>Location: <?php echo $kblahLocation ?></h4>
                            <h4>blah1: <?php echo $blah1 ?>/blah2: <?php echo $blah2 ?></h4>
                            <div>
                                <form method='post'>
                                <input type='hidden' value='<?php echo $kblah ?>' name='kblah_name' />
                                <input class='form-control' type='number' name='blah' />
                                <button class='button' type='submit' name='blahblah' >blahblah</button>
                                <button class='button' type='submit' name='sheblah' >sheblah</button>
                                </form>
                            </div>
                        </div>
                        <table class="table table-bordered table-hover table-sm">
                        <tbody>
                            <tr>
                                <th>Blah</th>
                                <th>Blah Status</th>
                                <th>Blah #</th>
                                <th>Blah Bat</th>
                                <th>Blah Type</th>
                                <th>Blah Button</th>
                            </tr>
                            <?php
                            $blahTableID = getblahTableID($kblahLowerCase);
                            $numberOfBlahs = getNumberOfBlahs($blahTableID);
                            for ($x = 1; $x <= $numberOfBlahs; $x += 1) {
                                $blahNumber = getblahNumber($blahTableID, $x);
                                $blahStatus = getBlahStatus($blahTableID, $x);
                                $blahType = getBlahTypeFromSQL($blahNumber);
                                $firstLetter = substr($blahStatus, 0, 1);
                                $blahLevel = getBlahLevel($blahNumber);
                                echo "<tr>";
                                echo "<td>${x}</td>";
                                echo "<td>${blahStatus}</td>";
                                if ($blahNumber != "null") {
                                    echo "<td>${blahNumber}</td>";
                                    echo "<td>${blahLevel}</td>";
                                    echo "<td>${blahType}</td>";
                                }
                                else {
                                    echo "<td>N/A</td>";
                                    echo "<td>N/A</td>";
                                    echo "<td>N/A</td>";
                                }
                                if ($blahType == 5) {
                                    echo "<td> <form method='post'>
                                    <input type='hidden' value='${blahNumber}' name='blah_num' />
                                    <button class='button' type='submit' name='blah_push' >Push Blah</button>
                                    </form>
                                    </td>";
                                }
                                else if ($blahType == 11) {
                                    echo "<td><button class='button'>blah placeholder</button></td>";
                                }
                                else {
                                    echo "<td>N/A</td>";
                                }
                                echo "</tr>
";
                            }
                            ?>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <?php
        }
    }
    ?>
    </div>

• 核心原因：缺少Bootstrap JavaScript依赖
  Bootstrap 5的折叠（Collapse）组件（包括Accordion）需要JS来处理交互逻辑，你当前只引入了CSS文件，没有加载对应的Bootstrap JS，这是无法折叠的关键问题。

• 修复步骤

  1. 添加Bootstrap JavaScript文件
     在HTML的<body>标签末尾（推荐位置，优化页面加载速度）引入和CSS版本一致（5.1.3）的Bootstrap JS包：

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     

     这个包已经包含了Popper.js，Bootstrap的交互组件依赖它，无需单独引入。

  2. 验证ID匹配性
     确保按钮的data-bs-target属性值和对应折叠面板的id完全一致：

     • 按钮的data-bs-target="#panelsStayOpen-collapse<?php echo $kblah ?>"
     • 面板的id="panelsStayOpen-collapse<?php echo $kblah ?>"
       如果$kblah包含空格、特殊符号（除了字母、数字、下划线、连字符），会导致选择器失效，建议清理$kblah：

     $cleanKblah = preg_replace('/[^a-zA-Z0-9_-]/', '', $kblah);
     

     之后在ID和data-bs-target中使用$cleanKblah。

• 额外排查点
  检查页面是否有冲突的JS代码，比如旧版本jQuery（Bootstrap 5不再依赖jQuery），如果存在可能会干扰Bootstrap的JS执行。

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