JS+CSS实现TreeMenu二级树形菜单完整实例

当用户需要在页面展示大量的分类信息时，树形菜单就可以提供一种直观并便捷的分类方式。同时，TreeMenu是一种常见的树形菜单，它可以很好地帮助用户快速定位和操作特定的选项。本攻略将介绍如何使用JS和CSS实现一个简单的TreeMenu二级树形菜单，并提供两个示例说明，以帮助您更好地理解实现过程。

实现思路

TreeMenu菜单可以通过HTML、CSS和JavaScript创建。首先，我们需要创建一个HTML文档，用CSS样式将其美化，并通过JavaScript编写功能来实现TreeMenu。在实现过程中，我们需要了解如下几个关键点：

1. 通过JavaScript动态创建二级菜单
2. 通过CSS样式设置菜单的样式和功能
3. 使用JavaScript监听用户的点击事件并对其进行响应

实现步骤

1. 创建HTML文档

首先，我们需要在HTML文档中创建一个菜单容器div，并为其添加id属性，以便在CSS样式中引用。接着，我们再创建一个ul列表，并添加一个垂直子元素，每个子元素用于存储一个菜单项以及该项的子菜单。

<div id="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

2. 编写CSS样式

接下来，我们需要用CSS样式为菜单项添加样式，使其更具可读性和美观性。这里我们使用了CSS伪类来创建菜单项的鼠标hover效果，并采用类似于标签选择器的方式为二级菜单的子菜单添加样式。此外，我们还需要在CSS中指定每个子菜单的样式和隐藏功能。

#menu {
  margin: 0;
  padding: 0;
}

#menu ul,
#menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  background-color: #efefef;
  padding: 5px;
  border-bottom: #eaeaea 1px solid;
}

#menu li:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

#menu li ul {
  position: absolute;
  display: none;
}

#menu li ul li {
  background-color: #fff;
  border-bottom: #eaeaea 1px solid;
}

#menu li:hover ul {
  display: block;
}

3. 实现JavaScript功能

最后，我们使用JavaScript功能实现TreeMenu的功能。新建一个JS文件并得到当前菜单的列表项和所有的子菜单列表项。此外，我们还可以通过为列表项li元素添加click事件来控制子菜单的显示和隐藏。通过在JavaScript中添加以下代码，就可以实现TreeMenu的功能。

var subMenus = document.querySelectorAll('#menu li ul');
for (var i = 0; i < subMenus.length; i++) {
  subMenus[i].parentNode.firstChild.addEventListener('click', function(e) {
    if (this.nextElementSibling.style.display === 'block') {
      this.nextElementSibling.style.display = 'none';
    } else {
      this.nextElementSibling.style.display = 'block';
    }
  });
}

示例说明

下面我们通过两个示例来说明如何实现TreeMenu的功能。

示例一

第一个示例中，我们使用JavaScript动态生成了二级菜单。具体来说，我们可以使用appendChild()方法和createElement()方法向菜单节点添加新的子元素。

var ul = document.createElement("ul");
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode("child menu item");
a.appendChild(t);
li.appendChild(a);
ul.appendChild(li);
document.getElementById("menu").appendChild(ul);

示例二

第二个示例中，我们根据用户的选择动态生成新的菜单。这里我们通过创建一个JavaScript函数，并通过单击按钮来调用该函数来实现功能。

function addItem() {
  var ul = document.createElement("ul");
  var li = document.createElement("li");
  var a = document.createElement("a");
  var t = document.createTextNode("new menu item");
  a.appendChild(t);
  li.appendChild(a);
  ul.appendChild(li);
  document.getElementById("menu").appendChild(ul);
}

结论

通过以上攻略，我们可以成功地使用JS和CSS实现一个TreeMenu二级树形菜单。您可以自己尝试实现不同的CSS样式和JavaScript响应事件来实现您的自定义菜单。