js++原生+折叠菜单栏

以下是关于在 JavaScript 原生实现折叠菜单栏的相关内容：

基础概念：折叠菜单栏是一种常见的用户界面元素，可以根据用户的操作（如点击）来展开或收起菜单内容，以提高页面的可用性和美观性。

优势：

节省页面空间，使页面布局更简洁。
提供更好的用户体验，用户可以根据需要选择查看菜单内容。

类型：

简单的点击展开/收起。
带有动画效果的展开/收起。

应用场景：

导航菜单，特别是在移动设备上。
侧边栏菜单。

实现示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .menu {
      width: 200px;
      border: 1px solid #ccc;
    }

   .menu-item {
      background-color: #f1f1f1;
      padding: 10px;
      cursor: pointer;
    }

   .submenu {
      display: none;
      padding-left: 20px;
    }
  </style>
</head>

<body>
  <div class="menu">
    <div class="menu-item">菜单 1
      <div class="submenu">
        <div class="menu-item">子菜单 1-1</div>
        <div class="menu-item">子菜单 1-2</div>
      </div>
    </div>
    <div class="menu-item">菜单 2
      <div class="submenu">
        <div class="menu-item">子菜单 2-1</div>
        <div class="menu-item">子菜单 2-2</div>
      </div>
    </div>
  </div>

  <script>
    const menuItems = document.querySelectorAll('.menu-item');

    menuItems.forEach(item => {
      item.addEventListener('click', function () {
        const submenu = this.querySelector('.submenu');
        if (submenu) {
          submenu.style.display = submenu.style.display === 'block'? 'none' : 'block';
        }
      });
    });
  </script>
</body>

</html>

可能出现的问题及解决方法：