如何用纯HTML和CSS实现导航抽屉中Material Design展开折叠列表

实现思路 #

无需引入JavaScript，利用HTML原生checkbox的checked状态结合CSS选择器控制子菜单的显隐，完全兼容MDC组件库原有样式。

第一步：调整HTML结构 #

将原有的单层列表调整为嵌套结构，父菜单项绑定隐藏的checkbox作为开关，子菜单作为独立的嵌套列表放在父项下方：

<div class="mdc-drawer__content">
  <ul class="mdc-list">
    <!-- 普通首页菜单项 -->
    <a class="mdc-list-item" href="#">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__text">
        <span class="mdc-list-item__primary-text"> Home </span>
        <span class="mdc-list-item__secondary-text">Dashboard</span>
      </span>
    </a>

    <!-- 可折叠父菜单项 -->
    <input type="checkbox" id="expand-item1" class="expand-toggle">
    <label for="expand-item1" class="mdc-list-item expand-parent">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__text mdc-list-item__primary-text">Item1</span>
      <span class="expand-arrow">▼</span>
    </label>
    <!-- 折叠子菜单 -->
    <ul class="expand-submenu mdc-list">
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text mdc-list-item__primary-text">Submenu1</span>
      </a>
      <a class="mdc-list-item" href="/admin/account.html">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text mdc-list-item__primary-text">Submenu2</span>
      </a>
    </ul>
  </ul>
</div>

第二步：添加CSS样式 #

新增样式控制开关显隐、子菜单默认状态和展开动画：

/* 隐藏默认checkbox开关 */
.expand-toggle {
  display: none;
}

/* 父菜单项布局，适配箭头位置 */
.expand-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* 箭头默认样式 */
.expand-arrow {
  transition: transform 0.2s ease;
  font-size: 12px;
  margin-right: 16px;
}

/* 子菜单默认折叠状态 */
.expand-submenu {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  padding-left: 16px; /* 子菜单缩进，区分层级 */
}

/* checkbox选中时，展开子菜单 */
.expand-toggle:checked ~ .expand-submenu {
  height: 112px; /* 两个子项每个高56px，可根据实际子项数量调整 */
}

/* checkbox选中时，箭头旋转 */
.expand-toggle:checked ~ .expand-parent .expand-arrow {
  transform: rotate(180deg);
}

效果说明 #

• 点击父菜单项Item1即可切换子菜单展开/收起状态
• 自带平滑过渡动画，体验更流畅
• 子菜单默认缩进显示，层级清晰
• 完全适配原有MDC抽屉的样式规范，不会破坏原有组件效果

如果需要适配更多子项，只需要调整.expand-toggle:checked ~ .expand-submenu的height值即可，也可以设置为height: auto，但auto不会触发过渡动画，推荐根据实际子项数量设置固定高度。

内容的提问来源于stack exchange，提问作者rraj