如何在Django模板中实现Bootstrap多级下拉菜单？

问题诊断 #

你的代码存在几个核心问题：

• Bootstrap版本属性混用：同时使用了旧版data-toggle和新版data-bs-toggle，导致JS触发逻辑混乱
• 子菜单初始未隐藏：CSS未设置默认隐藏规则，页面加载后子分类直接显示
• 自定义类名覆盖默认样式：dropdown-menu2未继承Bootstrap下拉菜单的核心样式

修复步骤 #

1. 统一Bootstrap 5语法 #

将模板中所有下拉相关属性替换为Bootstrap 5的data-bs-*前缀，移除旧版属性：

修改后的base.html结构

<div class="nav-item dropdown">
    <a href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Categories</a>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    {% for category in catg %}
        <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ category.title }}</a>
            <ul class="dropdown-menu" aria-labelledby="multilevelDropdownMenu1">
                {% for subcategory in category.children.all %}
                    <li><a href="#" class="dropdown-item">{{ subcategory.title }}</a></li>
                {% endfor %}
            </ul>
        </li>
    {% endfor %}
    </ul>
</div>

2. 调整CSS样式 #

设置子菜单默认隐藏，修正定位逻辑，同时支持hover触发显示：

更新后的base.css

/* 定义子菜单容器定位 */
.dropdown-submenu {
    position: relative;
}

/* 子菜单默认隐藏 */
.dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-top-left-radius: 0;
}

/* Hover父分类时显示子菜单 */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* 点击触发的兼容类（配合JS使用） */
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}

3. 添加点击触发的JS逻辑（可选） #

如果需要支持点击父分类显示/隐藏子菜单（而非仅hover），在模板底部添加以下JS代码（需确保已加载Bootstrap 5的JS）：

// 处理子菜单点击事件
document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(element => {
    element.addEventListener('click', e => {
        e.stopPropagation();
        e.preventDefault();
        element.closest('.dropdown-submenu').classList.toggle('show');
    });
});

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

4. 验证依赖加载 #

确保页面正确引入Bootstrap 5的CSS和JS：

<!-- 头部加载Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 底部加载Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

效果说明 #

• 父分类hover时，子菜单从右侧弹出显示
• 若添加了JS代码，点击父分类也能切换子菜单的显示状态
• 子菜单默认隐藏，仅在触发时显示，符合需求

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