首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/lib/jquery/treeview/jquery.treeview.css" />
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/>
<h1 id="banner">jQuery Treeview 简单</h1>
<div id="main">
    <ul id="browser" class="filetree treeview-famfamfam">
        <li><span class="folder">Folder 1</span>
            <ul>
                <li><span class="folder">Item 1.1</span>
                    <ul>
                        <li><span class="file">Item 1.1.1</span></li>
                    </ul>
                </li>
                <li><span class="folder">Folder 2</span>
                    <ul>
                        <li><span class="folder">Subfolder 2.1</span>
                            <ul id="folder21">
                                <li><span class="file">File 2.1.1</span></li>
                                <li><span class="file">File 2.1.2</span></li>
                            </ul>
                        </li>
                        <li><span class="folder">Subfolder 2.2</span>
                            <ul>
                                <li><span class="file">File 2.2.1</span></li>
                                <li><span class="file">File 2.2.2</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                    <ul>
                        <li><span class="file">File 3.1</span></li>
                    </ul>
                </li>
                <li><span class="file">File 4</span></li>
            </ul>
        </li>
    </ul>
    <button id="add">Add!</button>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/treeview/jquery.cookie.js"></script>
<script src="/static/lib/jquery/treeview/jquery.treeview.js"></script>
<script>
$(document).ready(function(){
    $("#browser").treeview({
        toggle: function() {
            console.log("%s was toggled.", $(this).find(">span").text());
        }
    });

$("#add").click(function() {
        var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
            "<li><span class='file'>Item1</span></li>" +
            "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
        $("#browser").treeview({
            add: branches
        });
    });
});
</script>

代码编辑器：

运行结果：