jQuery中的treeview插件

jQuery做树状结构真的很简单,下面做一个最简单的示例:

在html文件中引用:

<link rel="stylesheet" href="../jquery.treeview.css" />
    <link rel="stylesheet" href="../red-treeview.css" />
    <link rel="stylesheet" href="screen.css" />
    <script src="../lib/jquery.js" type="text/javascript"></script>
    <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
    <script src="../jquery.treeview.js" type="text/javascript"></script>

 

然后定义:

<script language="JavaScript">
        $(document).ready(function(){
            $("#navigation").treeview({
                collapsed: true,
                unique:true,
                persist:"location"//这项很关键
            });
        });
        </script>

然后在下面定义一个列表并指定id即可

<ul id="navigation">
        <li>根节点</li>
            <ul>
            <li>子节点</li>
                <ul>
                    <li><span>第一节点</span></li>
                    <li><span>第二节点</span></li>
                    <li><span>第三节点</span></li>
                </ul>
            <li>子节点</li>
        </ul>
    </ul>