javascript - 展开/折叠对象列表

Question

我正在尝试显示对象模型(机器人)列表，这些模型有一个可以是另一个机器人的字段 Parent。

我已经使用 Django 的 MPTT 实现了一个嵌套列表:

{% load mptt_tags %}
<ul>
    {% recursetree nodes %}
        <li>
            <a href="{{ node.get_absolute_url }}">{{ node.name }}</a>
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>
            {% endif %}

        </li>
    {% endrecursetree %}
</ul>

我现在想让列表可展开/折叠——例如，我可以收缩所有子节点。我在为此使用 Javascript 时遇到问题，因为节点都属于同一类。还有其他简单的实现方法吗？

Answer 1

您可以使用 node.level 确定您在树中的级别，因此您只需要在顶层添加一个额外的 CSS 类，如下所示:

<ul id="node-{{ node.pk }}" class="children{% if node.level==0 %} top_level{% endif %}">

node.tree_id 也可能很有趣，而不仅仅是 pk