Bootstrap折叠组件在嵌套无序列表中无法正常工作的问题排查

嘿，我来帮你搞定这个嵌套折叠列表的问题！仔细看了你的代码后，发现问题主要出在两个细节上：

• 后续包含折叠触发链接的<li>标签都没加list-group-item-action类——这个类是Bootstrap用来标记可交互列表项的核心类，没有它的话，点击事件没法正确绑定到这些列表项上；
• 部分触发链接缺少aria-expanded属性，虽然不影响核心功能，但会影响可访问性，也可能导致折叠状态的切换显示异常。

好在你已经用UUID确保了每个折叠面板的ID都是唯一的，这一点做得很到位，不用改动。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <ul class="list-group list-group-flush">
        <li class="list-group-item list-group-item-action">
            <a href="#f1499360-b771-487a-9d84-e399f69f4568" data-toggle="collapse" class="" aria-expanded="true">
                <h3>Test Site</h3>
            </a>
            <div class="collapse show" id="f1499360-b771-487a-9d84-e399f69f4568" style="">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-action">
                        <a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
                            <h5>132</h5>
                        </a>
                        <div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-action">
                                    <a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
                                        <h5>Hello</h5>
                                    </a>
                                    <div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <h6>Direct Connect Drive Status</h6>
                                                <div class="float-left">Drive 1:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                                <div class="float-left">Drive 2:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                                <div class="float-left">Drive 3:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                                <div class="float-left">Drive 4:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="list-group-item list-group-item-action">
                                    <a href="#50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse" aria-expanded="false">
                                        <h5>name 2</h5>
                                    </a>
                                    <div class="collapse" id="50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <h6>Direct Connect Drive Status</h6>
                                                <div class="float-left">Drive 1:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                                <div class="float-left">Drive 2:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                                <div class="float-left">Drive 3:</div>
                                                <div class="float-right">Float right on all viewport sizes</div><br>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="list-group-item list-group-item-action">
                                    <a href="#4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse" aria-expanded="false">
                                        <h5>Test Assign</h5>
                                    </a>
                                    <div class="collapse" id="4c6fc729-78b4-4d06-bbdd-749c96cafd05">
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <h6>Direct Connect Drive Status</h6>
                                                <div class="float-left text-warning">Not Configured - Check Settings</div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-action">
                        <a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse" aria-expanded="false">
                            <h5>aaa</h5>
                        </a>
                        <div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-action">
                                    <a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse" aria-expanded="false">
                                        <h5>Station module 2</h5>
                                    </a>
                                    <div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <h6>Direct Connect Drive Status</h6>
                                                <div class="float-left text-warning">Not Configured - Check Settings</div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

关键修改点解释 #

1. 添加list-group-item-action类：给所有包含折叠触发链接的<li>都加上这个类，Bootstrap会自动为这类元素绑定点击事件，同时提供hover、active等交互样式，确保每个折叠触发项都能正常响应点击。
2. 补充aria-expanded属性：根据折叠面板的初始状态设置这个属性——如果面板初始展开（带show类），就设为true；初始折叠则设为false。这不仅符合WAI-ARIA可访问性规范，还能让Bootstrap更准确地跟踪折叠状态。
3. 保持层级结构清晰：你的原结构层级是正确的，每个折叠面板都嵌套在对应的列表项内，不需要调整，这能避免事件冒泡带来的干扰。

修改完之后，所有嵌套的折叠元素应该都能正常触发展开/折叠功能了。

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