js折叠菜单 array

在JavaScript中实现折叠菜单通常涉及到数组的操作，特别是当你需要动态地处理菜单项时。以下是一些基础概念和相关信息：

基础概念

数组（Array）：在JavaScript中，数组是一种特殊的对象，用于存储多个值。
DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。通过DOM，你可以使用JavaScript来更改内容、结构和样式。
事件监听：JavaScript允许你为HTML元素添加事件监听器，以便在特定事件发生时执行代码。

优势

动态性：可以根据数组内容动态生成菜单。
交互性：用户可以点击菜单项来展开或折叠子菜单。
可维护性：代码结构清晰，易于维护和扩展。

类型

单级菜单：简单的菜单项列表。
多级菜单：包含子菜单的菜单项，可以有多层嵌套。

应用场景

网站导航：常见的网站顶部或侧边栏导航。
管理后台：复杂的系统管理界面。
移动应用：适配不同屏幕尺寸的导航菜单。

示例代码

以下是一个简单的JavaScript折叠菜单示例，使用数组来存储菜单项：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠菜单示例</title>
<style>
  .submenu {
    display: none;
  }
  .active {
    display: block;
  }
</style>
</head>
<body>

<ul id="menu">
</ul>

<script>
const menuItems = [
  { name: '首页', url: '#' },
  { 
    name: '服务', 
    url: '#', 
    submenu: [
      { name: '服务1', url: '#' },
      { name: '服务2', url: '#' }
    ]
  },
  { name: '关于我们', url: '#' }
];

function createMenu(items, parentElement) {
  items.forEach(item => {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = item.url;
    a.textContent = item.name;
    li.appendChild(a);

    if (item.submenu) {
      const ul = document.createElement('ul');
      ul.classList.add('submenu');
      createMenu(item.submenu, ul);
      li.appendChild(ul);

      a.addEventListener('click', (e) => {
        e.preventDefault();
        ul.classList.toggle('active');
      });
    }

    parentElement.appendChild(li);
  });
}

const menuElement = document.getElementById('menu');
createMenu(menuItems, menuElement);
</script>

</body>
</html>