Question

我正在使用django mptt来显示导航菜单。

{% load mptt_tags %}
<ul class="nav_menu">
    {% recursetree nav_link.get_descendants %}
        {% if node.is_shown %}
            <li>
                <a href="{{ node.url }}">{{ node.title }}</a>
                {% if not node.is_leaf_node %}
                    <ul class="nav_menu">
                        {{ children }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endrecursetree %}
</ul>

是否可以使用课程nav_menu标记每个first-child的每个第一个孩子，并使用课程nav_menu标记每个last-child的最后一个孩子？< / p>

例如：

<ul class="nav_menu">
    <li class="first-child">
        <a href="">Node 1</a>
        <ul class="nav_menu">
           <li class="first-child last-child">
              <a href="">Node 1.1</a>
           </li>
        </ul>
    </li>
    <li>
        <a href="">Node 2</a>
        <ul class="nav_menu">
           <li class="first-child">
              <a href="">Node 2.1</a>
           </li>
           <li class="last-child">
               <a href="">Node 2.2</a>
           </li>
        </ul>
    </li>
    <li class="last-child">
        <a href="">Node 3</a>
    </li>
</ul>

Answer 1

通过查询get_previous_sibling和get_next_sibling，节点可以知道它是第一个还是最后一个。

<a class="{% if not node.get_previous_sibling %}first_child {% endif %}{% if not node.get_next_sibling %}last_child{% endif %} href="{{ node.url }}">{{ node.title }}</a>

这些调用应该在节点缓存上运行，因此不会命中数据库。但是，CSS已经为first-child和last-child提供了伪选择器，因此除非你的目标是旧版浏览器，否则使用这些样式而不是使用显式类可能会更好。

Answer 2

如果不是根据每个节点的计算值显示数据库中的所有项目，则数据库中的第一项和最后一项不必匹配列表中的第一项和最后一项。在这种情况下，第一项和最后一项可以用javascript / jquery标记：

$(document).ready(function() {
    $('.nav_menu li:first-child').addClass("first-child");
    $('.nav_menu li:last-child').addClass("last-child");
});

确定django-mptt中每个级别的第一个和最后一个元素

2 个答案: