js树形菜单代码

这是一个简单的JavaScript树形菜单的代码示例。它使用了基本的HTML和CSS，以及JavaScript来管理菜单的显示和隐藏。

HTML部分：

html复制代码
<ul id="treeMenu">  
    <li>菜单1  
        <ul>  
            <li>子菜单1.1</li>  
            <li>子菜单1.2  
                <ul>  
                    <li>子菜单1.2.1</li>  
                    <li>子菜单1.2.2</li>  
                </ul>  
            </li>  
        </ul>  
    </li>  
    <li>菜单2  
        <ul>  
            <li>子菜单2.1</li>  
            <li>子菜单2.2</li>  
        </ul>  
    </li>  
</ul>

CSS部分：

css复制代码
#treeMenu ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
}  
  
#treeMenu li {  
    margin: 5px 0;  
    padding: 5px;  
    cursor: pointer;  
}  
  
#treeMenu ul ul {  
    display: none;  
}

JavaScript部分：

javascript复制代码
window.onload = function() {  
    var listItems = document.querySelectorAll('#treeMenu li');  
    for (var i = 0; i < listItems.length; i++) {  
        listItems[i].addEventListener('click', function(e) {  
            var subList = this.querySelector('ul');  
            if (subList) {  
                e.preventDefault();  
                subList.style.display = subList.style.display == 'none' ? 'block' : 'none';  
            }  
        });  
    }  
}

在这个示例中，我们首先获取所有的列表项，并为每个列表项添加一个点击事件监听器。当点击一个列表项时，我们检查它是否有一个子列表。如果有，我们就切换子列表的显示状态。注意，我们使用e.preventDefault()来阻止默认的点击行为，这样点击列表项时就不会跳转到其他页面。

这只是一个基本的示例，你可能需要根据你的具体需求来调整它。例如，你可能希望添加一些动画效果，或者改变菜单的样式等等。

当然，我们可以进一步改进这个树形菜单的代码，比如增加一些交互效果，如折叠/展开动画，或者通过键盘事件来控制菜单的展开和折叠。以下是一个扩展版本的树形菜单代码，它使用了简单的CSS过渡效果来平滑地展开和折叠子菜单。

HTML 部分（保持不变）：

html复制代码
<ul id="treeMenu">  
    <li>菜单1  
        <ul>  
            <li>子菜单1.1</li>  
            <li>子菜单1.2  
                <ul>  
                    <li>子菜单1.2.1</li>  
                    <li>子菜单1.2.2</li>  
                </ul>  
            </li>  
        </ul>  
    </li>  
    <li>菜单2  
        <ul>  
            <li>子菜单2.1</li>  
            <li>子菜单2.2</li>  
        </ul>  
    </li>  
</ul>

CSS 部分（增加了过渡效果）：

css复制代码
#treeMenu ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
}  
  
#treeMenu li {  
    margin: 5px 0;  
    padding: 5px;  
    cursor: pointer;  
    position: relative; /* 为箭头定位 */  
}  
  
#treeMenu li::before {  
    content: "►"; /* 折叠箭头 */  
    position: absolute;  
    left: -10px; /* 根据需要调整位置 */  
}  
  
#treeMenu li.open::before {  
    content: "▼"; /* 展开箭头 */  
}  
  
#treeMenu ul ul {  
    display: none;  
    padding-left: 20px; /* 子菜单缩进 */  
    transition: all 0.3s ease; /* 平滑过渡效果 */  
}

JavaScript 部分（增加了箭头切换逻辑）：

javascript复制代码
window.onload = function() {  
    var listItems = document.querySelectorAll('#treeMenu li');  
    for (var i = 0; i < listItems.length; i++) {  
        listItems[i].addEventListener('click', function(e) {  
            var subList = this.querySelector('ul');  
            if (subList) {  
                e.preventDefault();  
                subList.style.display = subList.style.display == 'none' ? 'block' : 'none';  
                this.classList.toggle('open'); // 切换箭头  
            }  
        });  
    }  
}

在这个版本中，我们为每个列表项前添加了一个箭头符号，通过切换 ::before 伪元素的 content 属性来显示折叠或展开的箭头。同时，我们给包含子菜单的列表项添加了一个 open 类，这样我们就可以通过 CSS 来控制箭头的样式。最后，我们使用 transition 属性为子菜单的展开和折叠添加了平滑的过渡效果。

这只是一个简单的示例，实际的项目中可能需要更多的交互逻辑和样式调整来满足特定的设计需求。例如，你可能希望添加键盘导航功能，以便用户可以使用键盘方向键来展开和折叠菜单，或者添加更多的动画和过渡效果来提升用户体验。