jquery 实现列表点击折叠与展开的功能

最新推荐文章于 2025-04-07 11:42:32 发布

听雪声的春天

最新推荐文章于 2025-04-07 11:42:32 发布

阅读量8.8k

点赞数

分类专栏： web 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/grs294845170/article/details/77849798

版权

web 专栏收录该内容

32 篇文章

订阅专栏

该博客介绍如何利用jQuery实现列表项的点击事件，点击后内容展开，再次点击则内容折叠。同时，已查看的列表会在页面刷新后保持展开状态，并标记为已查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是点击列表,展开折叠的内容,再次点击后折叠列表,还要给数据打上已查看的标记,折叠列表后页面刷新,有已查看标记的数据就不会显示.

jquery代码:

    $(function (){
    var aa = 0;
 $(".gradeX").click(function(){
 $(this).toggleClass("selected");
    var b = $(this).find('.hostid').html();
    var c = $(this).find('.catas').html();
    if (aa == 0 ) {
 $(this).siblings().not(".gradeX").not(":first-child").hide();
 $(this).next().show().next().show();
        aa = 1;
    changestatus(b);
    } else {
        $(this).next().hide();
        aa = 0;
        if (c == 'baddata') {
        location.reload();
        } else{}
    }
 });
})

function changestatus(val) {
    $.ajax({
            url: '{% url "changestatus"  %}',
            type: 'POST',
            data: {hostid: val},
            success:function (callback) {
                }
            })
};

html:

tr的class 是gradeX, 里面两个td是hostid和catas的