使用JavaScript创建简单的树形菜单可以通过以下步骤实现:
<ul>
和<li>
)来表示树形结构,例如:<ul id="tree">
<li>节点1</li>
<li>节点2
<ul>
<li>节点2.1</li>
<li>节点2.2</li>
</ul>
</li>
<li>节点3</li>
</ul>
/* 隐藏所有子节点 */
#tree ul {
display: none;
}
/* 鼠标悬停在父节点上时显示子节点 */
#tree li:hover > ul {
display: block;
}
// 获取所有父节点
var parents = document.querySelectorAll('#tree li > ul');
// 给每一个父节点绑定点击事件
for (var i = 0; i < parents.length; i++) {
parents[i].parentNode.addEventListener('click', function() {
// 切换子节点的显示状态
var children = this.querySelector('ul');
if (children) {
children.style.display = (children.style.display == 'none') ? 'block' : 'none';
}
});
}
以上就是使用JavaScript创建简单的树形菜单的步骤。其中,关键词包括无序列表、CSS样式、事件绑定等。可以通过CSS样式实现菜单的美化和交互效果,通过JavaScript动态绑定事件实现菜单的交互效果。