Bootstrap 5嵌套下拉菜单实现及子菜单无法展开修复

明确说：Bootstrap 5 原生支持多级下拉菜单，你碰到的问题纯是代码结构错误导致的，完全不用换框架。

你的代码核心问题： #

• 前两个<li>标签没闭合，DOM结构乱了，直接干扰了嵌套下拉的事件绑定
• 嵌套下拉的触发链接设了实际跳转的href="typesOfMassages.html"，点击时会优先跳页面，根本触发不了下拉展开

修复后的完整代码： #

<ul class="dropdown-menu" aria-labelledby="massagesDropdown">
    <li><a class="dropdown-item" href="historyOfMassages.html">History of Massages</a></li>
    <li><a class="dropdown-item" href="benefitsOfMassages.html">Benefits of Massages</a></li>
    <li class="dropdown-submenu dropstart">
        <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Types of Massages
        </a>
        <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Item 1</a></li>
            <li><a href="#" class="dropdown-item">Item 2</a></li>
            <li><a href="#" class="dropdown-item">Item 3</a></li>
        </ul>
    </li>
</ul>

关键修改点： #

1. 补全前两个<li>的闭合标签</li>，保证DOM结构合法
2. 把嵌套下拉触发链接的href改成#，避免页面跳转打断下拉逻辑
3. 加role="button"和aria-expanded="false"属性，符合Bootstrap的可访问性规范
4. 给父<li>加dropdown-submenu类（Bootstrap 5.3+官方推荐的多级下拉类，样式兼容性更好）

额外需求处理： #

要是你需要点击「Types of Massages」时，既展开下拉又能跳转到对应页面，给触发链接加个自定义JS事件就行：

document.querySelector('.dropdown-submenu .dropdown-toggle').addEventListener('click', function(e) {
    // 下拉未展开时阻止跳转，展开后再跳转
    if (!this.nextElementSibling.classList.contains('show')) {
        e.preventDefault();
    } else {
        window.location.href = 'typesOfMassages.html';
    }
});

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