如何在Bootstrap 5.3与HTML中显示Laravel二级子菜单

Bootstrap 5.3 默认不支持原生多级下拉菜单，你遇到的二级子菜单无法显示问题，大概率是结构不对或者缺少必要的交互逻辑。下面是完整的修复方案：

1. 正确的HTML结构（Laravel Blade示例） #

把你的导航菜单改成如下嵌套结构，用自定义的dropdown-submenu类标记包含二级菜单的项：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url('/') }}">Laravel Nav</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="{{ url('/') }}">Home</a>
                </li>
                <!-- 带二级子菜单的Company项 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Company
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ url('/about') }}">About Us</a></li>
                        <!-- 二级子菜单 -->
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">Our Team</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url('/team/developers') }}">Developers</a></li>
                                <li><a class="dropdown-item" href="{{ url('/team/managers') }}">Managers</a></li>
                            </ul>
                        </li>
                        <li><a class="dropdown-item" href="{{ url('/contact') }}">Contact</a></li>
                    </ul>
                </li>
                <!-- 带二级子菜单的Tourism项 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Tourism
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ url('/destinations') }}">Destinations</a></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">Packages</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url('/packages/budget') }}">Budget</a></li>
                                <li><a class="dropdown-item" href="{{ url('/packages/luxury') }}">Luxury</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

2. 添加自定义CSS调整二级菜单位置 #

在你的样式文件（比如app.css或者Blade模板的<style>标签）中加入以下代码，避免二级菜单和一级菜单重叠：

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-top-left-radius: 0;
}

3. 编写JS交互逻辑 #

Bootstrap 5的下拉组件默认不会处理二级菜单的触发，需要添加JS来监听交互事件。在页面底部（或者app.js文件）加入：

// 点击触发二级子菜单
document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(element => {
    element.addEventListener('click', e => {
        e.stopPropagation();
        const parentMenu = this.closest('.dropdown-submenu');
        const subMenu = parentMenu.querySelector('.dropdown-menu');
        
        // 切换二级菜单显示状态
        if (subMenu.classList.contains('show')) {
            subMenu.classList.remove('show');
            this.setAttribute('aria-expanded', 'false');
        } else {
            // 关闭其他打开的二级菜单
            document.querySelectorAll('.dropdown-submenu .dropdown-menu.show').forEach(menu => {
                menu.classList.remove('show');
                menu.previousElementSibling.setAttribute('aria-expanded', 'false');
            });
            subMenu.classList.add('show');
            this.setAttribute('aria-expanded', 'true');
        }
    });
});

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

关键注意事项 #

• 确保已正确引入Bootstrap 5的CSS和JS文件（必须包含Popper.js，下拉组件依赖它）
• 不要用自定义浮动属性调整菜单位置，Bootstrap的下拉菜单基于position: absolute布局，浮动会破坏原有结构
• 如果想用悬停触发而非点击，把上述代码中的click事件换成mouseenter和mouseleave即可

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