Jq实现重叠效果-实现无限级分类树形中js 的折叠效果

循序0010

于 2015-08-04 09:01:33 发布

阅读量3.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011341352/article/details/47271559

版权

本文介绍了如何利用JQuery实现一个无限级分类的树形结构，并展示了如何实现折叠效果。通过在静态页面引入JQuery库，然后编写相应的JS代码，可以达到动态控制树形结构展开和折叠的目的。

摘要由CSDN通过智能技术生成

案例：

代码实现：

首先，在静态页面导入jq包；

然后，代码实现如下：

    //获取当前的 a 标签
    $('a.zd').click(function(){

        //找到当前所在的tr
        var tr = $(this).parent().parent();
        //获取当前的级别level
        var cur_level = $(this).attr('level');
        //获取当前a标签的内容
        var opt = $(this).html();
        //判断当前是否为[-]
        if(opt == '[-]')
        {
            //是，则在当前tr中，取出子分类并隐藏.nextAll()和preAll()获取的是兄弟节点
            tr.nextAll('tr').each(function(){
            	//再判断a标签内 level是否大于 当前cur_level值
            	if($(this).find('a.zd').attr('level') > cur_level)
            	{
            		$(this).hide();