展开/折叠对象列表

Question

I'm trying to display a list of object Models (Robots), the models have a field Parent which can be another Robot.

I've implemented a nested list using MPTT for Django:

{% 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>

I'd now like to make the list exandable/collapsable - eg I can shrink all nodes children. I'm having trouble using Javascript for this because the nodes are all of the same class. Is there any other simple way of implementing this?

Answer 1

you can figure out what level you're at in the tree using node.level , so all you need is add an additional CSS class to just the top level, something like this:

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

node.tree_id could also be interesting instead of just pk