jquery插件TreeViewt实现动态树状结构

最新推荐文章于 2025-06-29 09:45:10 发布

原创最新推荐文章于 2025-06-29 09:45:10 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何利用jQuery插件TreeView将无序列表转换为可展开和折叠的树形结构。示例中展示了多个层级的文件夹和文件，包括预设为关闭状态的文件夹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一款jquery插件TreeViewt实现动态树状结构</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <link rel="stylesheet" href="css/screen.css" type="text/css">
    <link rel="stylesheet" href="css/jquery.treeview.css" type="text/css">
    <script src="js/jquery.treeview.js"></script>
    
    <script>

        $(document).ready(function () {
            $("#tree").treeview();
        })
        
    </script>
    
</head>
<body>
<!--
     一款jquery插件TreeView:此插件能把无需列表转换成可展开与收缩的tree
-->
    <ul id="tree" class="filetree">
        <li>
            <span class="folder">Folder 1</span>
            <ul>
                <li><span class="file">Item 1.1</span></li>
            </ul>
        </li>
        <li>
            <span class="folder">Folder 2</span>
            <ul>
                <li>
                    <span class="folder">Subfolder 2.1</span>
                    <ul>
                        <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="file">File 2.2</span>
                </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>

</body>
</html>