jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

       最近在做前端开发项目中，需要用到树形结构。在网上查阅到了许多相应资源。其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码，结构简单，支持多级。还有详细的参数可以配置，以实现各种效果。

结构代码示例：

<script>
$(function(){
    $('#tree').lightTreeview({
    collapse: true,
    line: true,
    nodeEvent: true,
    unique: false,
    fileico: true,
    folderico: true,
    animate: 400
    });
})
</script>
<ul id="tree">
                 <li><a href="#">JS代码</a>
                        <ul>
                            <li><a href="#">JS焦点图</a></li>
                            <li><a href="#">JS导航菜单</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                    <li><a href="#">给排水</a>
                        <ul>
                            <li><a href="#">章节一</a></li>
                            <li><a href="#">章节二</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                    <li><a href="#">环评</a>
                        <ul>
                            <li><a href="#">章节一</a></li>
                            <li><a href="#">章节二</a></li>
                            <li><a href="#">章节三</a></li>
                            <li><a href="#">章节四</a></li>
                            <li><a href="#">章节测试</a></li>
                        </ul>
                    </li>
                </ul>

JS参数解释：

$('#demo3').lightTreeview({  //指定需要转化成treeview的ul或ol
    collapse: true, //是否允许收缩或展开树型菜单。默认为true
    line: true, //是否始用连接线。默认为true。你也可以直接对根节点加入类“treeview-noline”来实现同样的效果
    nodeEvent: true,  //是否将节点标题的点击也绑定菜单收缩展开的事件。默认为true
    unique: false,  //同级节点是否互斥。默认为false
    animate: 200,  //动画效果。0为无效果。默认为200
    style: 'red',  //菜单风格。目前有默认,灰色,红色,黑色,fam 共5种风格，风格可以通过添加CSS来增加。你也可以直接对根节点加入类“treeview-风格名称”来实现同样的效果
    fileico: false,  //是否显示文件的图标。默认为false。你也可以对节点的DOM加入类“treeview-file”来实现同样的效果
    folderico: false  //是否显示节点文件夹的图标。默认为false。你也可以对节点的DOM加入类“treeview-folder”来实现同样的效果});
//开启指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.open('#demo3 ul',200);//关闭指定的菜单，第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.close('#demo3 ul',200);//切换指定的菜单的样式（关闭变打开，打开变关闭），第一个参数为指定菜单的选择器，第二个参数为动画效果$.lightTreeview.toggle('#demo3 ul',200);

具体效果以及更详情的说明请看演示地址，以及以下：

Demo1  默认的样式

$('#demo1').lightTreeview();

Demo2

通过style值换风格,该值对应css里“treeview-xxx”中的xxx，您可以自己在CSS中建立新的风格。同时您可以直接对列表的根节点上加上一个class，值为treeview-red。

同级节点互斥。事件只响应在“+”或“-”上。

$('#demo2').lightTreeview({
    collapse: true,
    line: true,
    nodeEvent: false,
    unique: true,
    style: 'red',
    animate: 0
});

Demo3

您可以直接在列表里把需要隐藏的列表设为隐藏。

$('#demo3').lightTreeview({
    collapse: true,
    line: true,
    nodeEvent: true,
    unique: true,
    animate: 400
});

Demo4

  通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数，你可以自己收缩或展开需要的节点。

<p class="description">通过Plugin提供的$.lightTreeview.open(selector);$.lightTreeview.close(selector);$.lightTreeview.toggle(selector);三个函数，您可以自己收缩或展开需要的节点</p>

<span class="btn" onclick="$.lightTreeview.open('#demo4 ol,#demo4 ul')">展开全部</span> |
<span class="btn" onclick="$.lightTreeview.close('#demo4 ol,#demo4 ul')">收缩全部</span> |
<span class="btn" onclick="$.lightTreeview.toggle('#demo4 ol,#demo4 ul')">切换全部</span> |
<span class="btn" onclick="$.lightTreeview.toggle('#demo4 ul:last')">切换广东节点</span>

注：

1.其中需要的插件有：

<link rel="stylesheet" href="css/jquery.lightTreeview.css">

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/jquery.lightTreeview.pack.js"></script>

 

2.需要的函数和样式：

 

<script type="text/javascript">
        $(function() {
            $('#demo1').lightTreeview();
            $('#demo2').lightTreeview({
                collapse: true,
                line: true,
                nodeEvent: false,
                unique: true,
                style: 'red',
                animate: 0
            });
            $('#demo3').lightTreeview({
                collapse: true,
                line: true,
                nodeEvent: true,
                unique: true,
                style: 'black',
                animate: 400
            });
            $('#demo4').lightTreeview({
                collapse: true,
                line: true,
                nodeEvent: true,
                unique: false,
                style: 'gray',
                animate: 100,
                fileico: true,
                folderico: true
            });
        });
    </script>
   

 

 <style type="text/css">
        body {
            font-size: 12px;
            font-family: "宋体";
        }
        pre {
            font-family: Courier New;
            font-size: 14px;
            border:#CCCCCC 1px solid;
            padding:3px;
            background-color: #E0FBFA;
        }
        p {
            line-height: 150%;
            margin: 0;
        }
        .btn {
            cursor: pointer;
            color: #0066FF;
        }
        .exp {
            font-family: "Courier New","宋体";
            font-size: 12px;
            color: gray;
        }
    </style>

3.需要注意的是：

background: url(image/treeview-default.gif) 0 -111px no-repeat; 会报错，

正确的书写方式是：background: url(../image/treeview-default.gif) 0 -111px no-repeat;

原因：

          ../image/123.jpg 表示站点根目录下的image文件夹的下123.jpg

          image/123.jpg 表示和当前页面目一个目录下的image文件夹下的123.jpg

 

 

  （文章参考来源：http://www.16css.com）