原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）

这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。

以下是一个使用原生JavaScript手动实现的多级树状菜单效果，模仿了Element UI的el-menu组件的简单样式和功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree Menu</title>
<style>
  ul.el-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
 
  .el-menu-item {
    cursor: pointer;
    padding: 5px 10px;
    position: relative;
  }
 
  .el-menu-item:hover {
    background-color: #eee;
  }
 
  .el-submenu {
    position: relative;
  }
 
  .el-submenu ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
  }
 
  .el-submenu:hover ul {
    display: block;
  }
 
  .el-submenu__title:hover {
    background-color: #eee;
  }
</style>
</head>
<body>
 
<ul id="menu" class="el-menu">
  <li class="el-submenu">
    <div class="el-submenu__title">菜单1</div>
    <ul>
      <li class="el-menu-item">子菜单1-1</li>
      <li class="el-menu-item">子菜单1-2</li>
    </ul>
  </li>
  <li class="el-submenu">
    <div class="el-submenu__title">菜单2</div>
    <ul>
      <li class="el-menu-item">子菜单2-1</li>
      <li class="el-submenu">
        <div class="el-submenu__title">子菜单2-2</div>
        <ul>
          <li class="el-menu-item">子菜单2-2-1</li>
          <li class="el-menu-item">子菜单2-2-2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
 
<script>
  // 原生JS实现多级树状菜单效果
  const menu = document.getElementById('menu');
 
  // 为每个菜单项添加点击事件
  menu.addEventListener('click', function(event) {
    const target = event.target;
    // 如果点击的是子菜单的标题，则切换子菜单的显示状态
    if (target.classList.contains('el-submenu__title')) {
      const submenu = target.nextElementSibling;
      const isVisible = submenu.style.display === 'block';
      submenu.style.display = isVisible ? 'none' : 'block';
    }
  });
</script>
 
</body>
</html>

这段代码实现了一个简单的多级树状菜单，当鼠标悬停在子菜单的标题上时，相应的子菜单项会显示出来。这个例子只是一个基础实现，没有包含所有Element UIel-menu组件的功能（例如路由导航、激活状态等），但它展示了如何使用原生JavaScript来创建类似组件的交互效果。

原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）

评论已关闭

推荐阅读