Bootstrap 5侧边栏导航栏菜单及下拉按钮无响应问题求助

我帮你排查了代码里的问题，主要有两个关键点导致点击没反应：

1. 响应式折叠菜单的触发问题 #

你当前用类选择器.navbar-collapse作为data-bs-target的目标，虽然语法上没错，但这种方式在复杂页面里容易和其他元素冲突，而且Bootstrap官方更推荐用唯一ID选择器来指定折叠目标，这样更可靠。

2. 多层下拉菜单（Submenu）的问题 #

Bootstrap 5原生不支持多层下拉菜单，你用到的data-bs-submenu并不是官方提供的属性，所以子级下拉按钮点击后不会有任何反应，需要添加自定义JS逻辑来实现这个功能。

修复后的完整代码 #

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Test</title>
    <style>
        /* 给子菜单添加样式，避免和父菜单重叠 */
        .dropdown-submenu .dropdown-menu {
            left: 100%;
            top: 0;
            margin-top: -6px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-light bg-light navbar-expand-sm mb-3">
        <a class="navbar-brand">Navbar</a>
        <!-- 修改data-bs-target为ID选择器 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 给折叠容器添加唯一ID -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" tabindex="0" data-bs-toggle="dropdown" aria-expanded="false">Dropdown 3</a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="dropdown dropend dropdown-submenu">
                            <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown">Action</button>
                            <div class="dropdown-menu">
                                <button class="dropdown-item" type="button">Sub action</button>
                                <div class="dropdown dropend dropdown-submenu">
                                    <button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
                                    <div class="dropdown-menu">
                                        <button class="dropdown-item" type="button">Sub action</button>
                                        <button class="dropdown-item" type="button">Another sub action</button>
                                        <button class="dropdown-item" type="button">Something else here</button>
                                    </div>
                                </div>
                                <button class="dropdown-item" type="button">Something else here</button>
                                <button class="dropdown-item" type="button" disabled>Disabled action</button>
                                <div class="dropdown dropend dropdown-submenu">
                                    <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
                                    <div class="dropdown-menu">
                                        <button class="dropdown-item" type="button">Sub action</button>
                                        <button class="dropdown-item" type="button">Another sub action</button>
                                        <button class="dropdown-item" type="button">Something else here</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown-header">Dropdown header</div>
                        <div class="dropdown dropend dropdown-submenu">
                            <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
                            <div class="dropdown-menu">
                                <button class="dropdown-item" type="button">Sub action</button>
                                <button class="dropdown-item" type="button">Another sub action</button>
                                <button class="dropdown-item" type="button">Something else here</button>
                            </div>
                        </div>
                        <button class="dropdown-item" type="button">Something else here</button>
                        <div class="dropdown-divider"></div>
                        <button class="dropdown-item" type="button">Separated link</button>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script>
        // 自定义JS实现多层下拉菜单的展开/收起
        document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(function(toggleEl) {
            toggleEl.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                const parentMenu = this.closest('.dropdown-submenu');
                const subMenu = parentMenu.querySelector('.dropdown-menu');
                const isExpanded = subMenu.classList.contains('show');
                
                // 关闭其他同级子菜单
                document.querySelectorAll('.dropdown-submenu .dropdown-menu.show').forEach(function(menu) {
                    if (menu !== subMenu) {
                        menu.classList.remove('show');
                        menu.closest('.dropdown-submenu').querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
                    }
                });
                
                // 切换当前子菜单的状态
                subMenu.classList.toggle('show');
                this.setAttribute('aria-expanded', !isExpanded);
            });
        });

        // 点击页面其他区域关闭所有子菜单
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.dropdown')) {
                document.querySelectorAll('.dropdown-submenu .dropdown-menu.show').forEach(function(menu) {
                    menu.classList.remove('show');
                    menu.closest('.dropdown-submenu').querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
                });
            }
        });
    </script>
</body>

关键修复说明： #

• 折叠菜单修复：给折叠容器添加了id="navbarNav"，并把按钮的data-bs-target修改为#navbarNav，确保触发目标唯一且准确。
• 多层下拉修复：添加了自定义JavaScript逻辑，监听子菜单的切换按钮点击事件，实现展开/收起功能，同时处理了点击页面其他区域关闭菜单的交互，还添加了基础样式避免子菜单和父菜单重叠。
• 移除了无效的data-bs-submenu属性，因为Bootstrap 5不支持这个官方属性。

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