0

我正在使用 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_menulast-child

例如：

<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>
4

2 回答 2

2

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 已经为第一个子项和最后一个子项提供了伪选择器，因此最好只使用它们进行任何样式设置，而不是使用显式类，除非您的目标是较旧的浏览器。

于 2012-01-20T14:44:04.747 回答
0

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

$(document).ready(function() {
    $('.nav_menu li:first-child').addClass("first-child");
    $('.nav_menu li:last-child').addClass("last-child");
});
于 2012-01-24T15:38:32.677 回答