使用django-mptt搭配Bootstrap构建导航栏下拉菜单子类目不显示

问题原因 #

你有两处核心错误导致子类目名称不显示：

1. 多余嵌套了<li><a>标签包裹{{ children }}：MPTT的recursetree模板标签返回的children变量本身已经是完整的<li>节点内容</li>结构，你额外套的<a class="dropdown-item">相当于把子类目内容整个塞进了一个a标签内部，不仅破坏了HTML结构，还覆盖了子类目本身的文本渲染逻辑，所以只显示可点击区域不显示文字。
2. 所有下拉菜单共用了相同的id="navbarDropdown"：Bootstrap的下拉组件依赖id和aria-labelledby的对应关系，重复id会导致下拉菜单关联异常，即使修复了结构问题也可能出现点击无响应的情况。

修正后的代码 #

{% load mptt_tags %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                {% recursetree categories %}
                <li class="nav-item {% if not node.is_leaf_node %}dropdown{% endif %}">
                    {% if node.is_leaf_node %}
                    <!-- 叶子节点判断：如果是子类目，加dropdown-item类匹配Bootstrap样式 -->
                    <a class="nav-link {% if node.level > 0 %}dropdown-item{% endif %}" href="{{ node.get_absolute_url }}">{{ node.name }}</a>
                    {% else %}
                    <!-- 父节点作为下拉触发器 -->
                    <a class="nav-link dropdown-toggle" href="{{ node.get_absolute_url }}" id="navbarDropdown-{{ node.id }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ node.name }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown-{{ node.id }}">
                        <!-- 直接输出children，不要额外套li和a标签 -->
                        {{ children }}
                    </ul>
                    {% endif %}
                </li>
                {% endrecursetree %}
            </ul>

            <form class="d-flex" role="search" action="/s/">
                <input class="form-control me-2" type="search" name="q" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

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