在Django模板中通过数据属性的数值切换元素

Question

我有一个组名列表，每个组名都有一个学生名列表。 我想在单击组名称时显示每个组下的名称列表。

例如

group 1(#clicked)     
    A 
    B
    C
group 2(#not clicked)
group 3(#clicked)
    F
    E
    R

我有两个模型

1：组（id，name）2：学生（id，name，group_id）

HTML： -

{% for group in groups%}
<span class="group-list" data-id="{{group.id}}">{{group.name}}<span class="clickSpan">Click To Expand</span><span class="date">Group created Date:{{group.update_date}}</span></span>
    <div class="child name-list">
    {% for stu in group.students_set.all %}
    <span>{{stu.name}}</span>
{%endfor%}
</div>
{%endfor%}

我想将组ID作为属性发送，并使用它仅显示与group_id匹配的那些名称。 我的HTML在每个组下给我正确的名字。 我想要的是单击组名称来切换它们。现在，它会切换所有组下的所有名称。

编辑：JAVASCRIPT：

nameDisplay = function () {
    $(".clickSpan").click(function () {
        $(".group-list").next('.name-list').toggle()
    });
}

clickSpan是我针对每个组名添加的跨度类，该组名称显示“单击以展开”。 我怎样才能达到这个目标？ 如果在展开时我可以在此处单击“单击以折叠”，也会更好。

Answer 1

您可以简单地使用.next()或其他方法来遍历触发事件的元素，然后可以使用.toggle()方法

获取匹配的元素集中每个元素的紧随其后的同级。 如果提供了选择器，则仅当与该选择器匹配时才检索下一个同级。

$(".group-list").click(function(){
    $(this).next(".name-list").toggle();
});

不需要其他属性。

Answer 2

在标记中，必须切换的group-list元素和name-list是兄弟元素，因此您可以利用该关系来切换正确的元素。

无需具有其他属性即可执行此操作。

nameDisplay = function () {
    $(".name-list").hide();
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}

---

另外最好使用css规则来设置name-list的默认隐藏状态，例如

.name-list {
    display: none;
}

然后使用点击处理程序使其可见

nameDisplay = function () {
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}