html左侧纵列折叠菜单

在HTML中，左侧纵向折叠菜单（也称为collapsible or accordion menu）是一种常见的响应式设计，它允许用户通过点击按钮或链接展开或折叠一系列子菜单项。这种设计常用于节省页面空间，特别是对于信息量大的内容。以下是基本实现的步骤：

1. **HTML结构**:

<div id="menu-container">
   <button class="menu-toggle">展开/折叠</button>
   <div class="menu-panel">
      <ul class="sub-menu">
         <li><a href="#">菜单项1</a>
            <ul class="nested-menu">
               <!-- 子菜单项 -->
            </ul>
         </li>
         <!-- 更多菜单项... -->
      </ul>
   </div>
</div>

2. **CSS样式**:

.menu-panel {
   display: flex;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.menu-open .menu-panel {
   max-height: 100vh; /* 自适应高度，如需滚动条则改为max-content */
}

3. **JavaScript/jQuery (可选)**:

$(document).ready(function() {
   $('.menu-toggle').click(function() {
      $(this).toggleClass('menu-open');
      $('.menu-panel').slideToggle(300);
   });
});

在这个例子中，当你点击"展开/折叠"按钮时，`.menu-panel`的`max-height`会被改变，使其可见或隐藏，并且有过渡效果。