Jquery toggle()方法的使用

时间:2026-02-12 21:13:09

1、下载Jquery文件并引入

Jquery toggle()方法的使用

2、编写html文件,为标题tr设置class=titletr,描述tr设置class=desctr,并分别设置id

Jquery toggle()方法的使用

3、编写css文件,设置表格的width:200px,将标题tr设置为text-align:center;并设置背景颜色

Jquery toggle()方法的使用

4、编写js文件来动态控制表格的效果,先采用已经删除的toggle()方法

$(function(){

    $('.titletr').toggle(function(){

        $(this).next().fadeIn(600);

    },function(){

        $(this).next().fadeOut(600);

    });

});

会出现,先显示后隐藏的效果

Jquery toggle()方法的使用

5、换用hover()方法来实现效果

$(function(){

    $('.titletr').hover(function(){

        $(this).next().fadeIn(600);

    },function(){

        $(this).next().fadeOut(600);

    });

});

Jquery toggle()方法的使用

6、使用toggle()的另一种支持形式

$(function(){

    $('.titletr').click(function(){

        $(this).next().toggle(600);

    },function(){

        $(this).next().toggle(600);

    });

});

Jquery toggle()方法的使用

© 2026 一点资料
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com