Django-CMS导航仅显示二级菜单 如何配置实现三级子菜单展示

问题原因 #

你当前代码的核心问题有2个：

• 用了get_descendants方法，会一次性取出当前节点下所有层级的后代节点，没有按层级迭代，导致三级菜单结构错位
• 菜单渲染逻辑是硬编码的两层嵌套，没有适配多层级结构，无法支持三级及以上的菜单展示

修复方案 #

建议用Django模板递归片段来实现，代码更简洁且支持无限层级的菜单渲染：

1. 先新建一个独立的模板片段，比如命名为menu_item.html，代码如下：

{# menu_item.html #}
{% for node in nodes %}
<li {% if not node.is_leaf_node %}class="dropdown"{% endif %}>
    <a href="{{ node.attr.redirect_url|default:node.get_absolute_url }}" title="{{ node.get_menu_title }}">
        {{ node.get_menu_title }}
        {% if not node.is_leaf_node %} >{% endif %}
    </a>
    {% if not node.is_leaf_node %}
    <ul class="dropdown-menu xpl1">
        {# 递归调用自身渲染下一层级子节点 #}
        {% include "menu_item.html" with nodes=node.get_children %}
    </ul>
    {% endif %}
</li>
{% endfor %}

2. 把你原来的菜单代码全部替换为如下调用即可：

<ul class="nav">
    {% include "menu_item.html" with nodes=children %}
</ul>

注意事项 #

• 请先确认Django-CMS后台的菜单配置中，WW1、WW2已经正确挂载为History的子节点，且两个节点都勾选了「在导航中显示」选项
• 如果前端三级菜单没有正常弹出，需要补充CSS样式：给dropdown类添加position: relative，给子级dropdown-menu类添加left: 100%; top: 0，让三级菜单从二级菜单的右侧弹出

内容的提问来源于stack exchange，提问作者Jean-Luca