技术求助：制作可嵌套的HTML dropdown元素，需排除下拉列表方案

API 探路者

2026-8-11

实现可嵌套的非下拉式折叠面板

你要的是可嵌套的展开/收起面板（而非下拉列表），可以用HTML原生的<details>和<summary>标签实现，完全满足嵌套需求，且默认就不是下拉形态。

基础实现代码

<div class="nested-panel">
  <details>
    <summary>一级菜单</summary>
    <div class="panel-content">
      <p>一级内容</p>
      <details>
        <summary>二级子菜单</summary>
        <div class="panel-content">
          <p>二级内容</p>
          <details>
            <summary>三级子菜单</summary>
            <div class="panel-content">
              <p>三级内容</p>
            </div>
          </details>
        </div>
      </details>
    </div>
  </details>
  
  <details>
    <summary>另一组一级菜单</summary>
    <div class="panel-content">
      <p>这组没有子菜单</p>
    </div>
  </details>
</div>

自定义样式（贴近示例效果）

默认的<details>样式比较基础，可以加CSS调整：

.nested-panel {
  max-width: 600px;
  margin: 20px;
}

details {
  margin: 8px 0;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

summary {
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  list-style: none; /* 去掉默认箭头 */
}

/* 自定义展开/收起箭头 */
summary::after {
  content: '▼';
  position: absolute;
  right: 16px;
  transition: transform 0.2s;
}

details[open] summary::after {
  transform: rotate(180deg);
}

.panel-content {
  padding: 12px 16px;
  background-color: #fff;
}

/* 嵌套层级缩进 */
details details summary {
  padding-left: 32px;
  background-color: #fafafa;
}

details details details summary {
  padding-left: 48px;
  background-color: #fdfdfd;
}