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

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

编辑： JAVASCRIPT：

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

clickSpan是我针对每个组名添加的范围的类，其中显示“click to exapnd”。我怎么能用这个达到同样的目标呢？此外，如果我可以在扩展时点击“崩溃”，那将会更好。

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()
    });
}

在django模板中按数据属性的数值切换元素

2 个答案: