Django中如何用模板循环展示菜单及对应子菜单？

1. 确认模型关联参考示例 #

确保你的模型外键关联设置了related_name，方便模板直接调用子菜单：

# models.py
from django.db import models

class Menu(models.Model):
    name = models.CharField(max_length=100, verbose_name="菜单名称")
    url = models.CharField(max_length=200, blank=True, verbose_name="菜单链接")

    def __str__(self):
        return self.name

class Submenu(models.Model):
    menu = models.ForeignKey(Menu, on_delete=models.CASCADE, related_name="submenus", verbose_name="所属菜单")
    name = models.CharField(max_length=100, verbose_name="子菜单名称")
    url = models.CharField(max_length=200, blank=True, verbose_name="子菜单链接")

    def __str__(self):
        return self.name

2. 优化视图查询减少数据库请求 #

在views.py中用prefetch_related一次性加载关联子菜单，避免N+1查询问题：

# views.py
from django.shortcuts import render
from .models import Menu

def menu_view(request):
    menus = Menu.objects.prefetch_related('submenus').all()
    return render(request, 'menu.html', {'menus': menus})

3. 模板嵌套循环展示层级菜单 #

在模板文件如menu.html中，通过双层for循环实现层级展示：

<!-- menu.html -->
<ul class="main-menu">
    {% for menu in menus %}
        <li class="menu-item">
            <a href="{{ menu.url }}">{{ menu.name }}</a>
            {% if menu.submenus.exists %}
                <ul class="sub-menu">
                    {% for submenu in menu.submenus.all %}
                        <li class="submenu-item">
                            <a href="{{ submenu.url }}">{{ submenu.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>

可选：添加基础样式区分层级 #

如果需要简单美化，可添加CSS：

.main-menu {
    list-style: none;
    padding-left: 0;
    background: #f5f5f5;
}
.menu-item {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
}
.sub-menu {
    list-style: none;
    padding-left: 20px;
    background: #fff;
}
.submenu-item {
    padding: 4px 0;
}

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