jQuery treeview插件

<scripttype="text/javascript"src="../jquery-3.2.1.min.js"></script>

    <link rel="stylesheet"href="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css"/>

    <link rel="stylesheet"href="http://static.runoob.com/assets/js/jquery-treeview/screen.css"/>

    <scriptsrc="http://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"></script>

    <script src="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js"type="text/javascript"></script>

以上是需引入的文件，jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。

<ul id="my" class="filetreetreeview-famfamfam">

   <h3>天龙八部</h3>

   <li><span class="folder">第一章</span>

       <ul>

           <li><span class="folder">第一节</span>

               <ul>

                   <li>第一节（上）</li>

                   <li>第一节（下）</li>

                </ul>

           </li>

           <li>第二节</li>

       </ul>

   </li>

</ul>

<button id="add">添加</button>

<script>

   $("#my").treeview();

   $("#add").click(function(){

        varnewChapter = $("<li><span>新的一章</span><ul><li><span>第一节</span></li><li><span>第二节</span></li></ul></li>");

       newChapter.appendTo("#my");

       $("#my").treeview({

           add:newChapter,

        });

    });

</script>