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

作者：weixin_40725706 | 2024-07-16 15:33:53

踩

jquery-treeview 菜单


<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/834992