html js树形折叠菜单实例
HTML JS Treeview 可以帮助您在网站上创建一个树形折叠菜单。以下是一个简单的示例：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
    <title>Treeview Example</title>
    <style>
        ul.treeview {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        ul.treeview li {
            padding: 5px;
            position: relative;
        }
        ul.pandable:before {
            content: '\25B6';
            position: absolute;
            left: -10px;
        }
        ul.llapsible:before {
            content: '\25BC';
            position: absolute;
            left: -10px;
        }
        ul.treeview li ul {
            display: none;
            margin-left: 20px;
        }
    </style>
</head>
queryselectorall用法
<body>
    <ul class="treeview">
        <li class="expandable">Item 1
            <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
            </ul>
        </li>
        <li class="expandable">Item 2
            <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    <script>
        var expandableItems = document.querySelectorAll('.expandable');
        for (var i = 0; i < expandableItems.length; i++) {
            expandableItems[i].addEventListener('click', function() {
                var submenu = this.querySelector('ul');
                if (submenu.style.display === "block") {
                    submenu.style.display = "none";
                    ve('collapsible');
                    this.classList.add('expandable');
                } else {
                    submenu.style.display = "block";
                    ve('expandable');
                    this.classList.add('collapsible');
                }
            });
        }
    </script>
</body>
</html>
```
上述示例中，我们首先在`<ul>`元素上添加了一个名为`treeview`的类。该类的样式规则用于格式化树形菜单。其中，`expandable`和`collapsible`类用于控制菜单项的展开和折叠。
通过JavaScript代码，我们为菜单项添加了一个点击事件。点击时，我们获取菜单项下的子菜单并切换其显示状态。我们还根据子菜单的显示状态动态修改菜单项的类，以便修改展开/折叠图标的样式。
请注意，上述示例仅用于展示基本的树形折叠菜单的实现方式。您可以根据自己的需要进行样式和功能的修改。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。