如何在汉堡菜单中添加“多级菜单”

在汉堡菜单中添加多级菜单可以通过以下步骤实现：

首先，确保你已经有一个汉堡菜单的基本结构。汉堡菜单通常是一个包含菜单图标的按钮，点击按钮后会展开一个侧边栏或下拉菜单。
在HTML中，创建一个具有子菜单的菜单项。可以使用无序列表（<ul>）和列表项（<li>）来创建菜单的层次结构。例如：

<ul>
  <li>菜单项1</li>
  <li>菜单项2
    <ul>
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li>菜单项3</li>
</ul>

在上面的示例中，菜单项2具有一个子菜单，子菜单包含两个子菜单项。

使用CSS样式来隐藏子菜单。可以使用display: none;来隐藏子菜单，例如：

ul ul {
  display: none;
}

使用CSS样式和JavaScript来实现菜单的展开和收起功能。可以通过添加事件监听器来实现点击菜单项时展开或收起子菜单的效果。例如：

var menuItems = document.querySelectorAll('li');

menuItems.forEach(function(item) {
  item.addEventListener('click', function() {
    var submenu = this.querySelector('ul');
    if (submenu) {
      if (submenu.style.display === 'none') {
        submenu.style.display = 'block';
      } else {
        submenu.style.display = 'none';
      }
    }
  });
});

上述代码会为每个菜单项添加点击事件监听器，当点击菜单项时，会查找其子菜单并切换显示状态。