jQuery文件夹 Treeview 简单实例，树型菜单插件，

最新推荐文章于 2024-05-30 09:54:20 发布

安果移不动

最新推荐文章于 2024-05-30 09:54:20 发布

阅读量715

点赞数

分类专栏： # javascript

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/81567782

版权

javascript 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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"/>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="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>
    <script>
        $(document).ready(function () {
            $('#browser').treeview({
                toggle: function () {
                    console.log("%s was toggled.", $(this).find(">span").text)
                }
            })
            $('#add').click(function () {
                var branchs = $('        <li>\n' +
                    '            <span class="folder">Folder 4</span>\n' +
                    '            <ul>\n' +
                    '                <li><span class="folder">File 4.1</span></li>\n' +
                    '                <li><span class="folder">File 4.2</span></li>\n' +
                    '            </ul>\n' +
                    '        </li>').appendTo("#browser")
                $('#browser').treeview({
                    add: branchs
                })
            })
            $('#delete').click(function () {
                $('#browser li').first().remove()
            })
        })
    </script>

</head>
<body>
<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>
            </ul>
        </li>

        <li>
            <span class="folder">Folder 2</span>
            <ul>
                <li><span class="folder">Item 2.1</span>
                    <ul>
                        <li><span class="file">Item 2.1.1</span></li>
                    </ul>
                </li>

                <li><span class="folder">Item 2.2</span>
                    <ul>
                        <li><span class="file">Item 2.2.1</span></li>
                        <li><span class="file">Item 2.2.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="closed">
            <span class="folder">Folder 3</span>
            <ul>
                <li><span class="file">File 3.1</span></li>
            </ul>
        </li>

        <li>
            <span class="folder">Folder 4</span>
            <ul>
                <li><span class="folder">File 4.1</span></li>
                <li><span class="folder">File 4.2</span></li>
            </ul>
        </li>

    </ul>
    <button id="add">Add!</button>
    <button id="delete">delete!</button>

</div>

</body>
</html>

安果移不动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery文件夹 Treeview 简单实例，树型菜单插件，

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="http://static.runoob.com
复制链接

扫一扫