需求开发带详情的可展开式菜单（附参考样式图）

以下是符合需求的可展开菜单实现，支持主图标、菜单文本、后置展开图标，以及展开后的详情内容展示，样式匹配示例效果：

HTML 结构 #

<div class="expandable-menu">
  <!-- 菜单项1 -->
  <div class="menu-item">
    <div class="menu-header">
      <span class="menu-icon">📁</span>
      <span class="menu-text">项目文件</span>
      <span class="expand-icon">▼</span>
    </div>
    <div class="menu-details">
      <p>包含项目所有源文件、配置文件及资源素材</p>
      <ul>
        <li>src/ 核心代码目录</li>
        <li>public/ 静态资源目录</li>
        <li>package.json 依赖配置</li>
      </ul>
    </div>
  </div>

  <!-- 菜单项2 -->
  <div class="menu-item">
    <div class="menu-header">
      <span class="menu-icon">⚙️</span>
      <span class="menu-text">系统设置</span>
      <span class="expand-icon">▼</span>
    </div>
    <div class="menu-details">
      <p>自定义系统行为、外观及权限设置</p>
      <ul>
        <li>外观主题切换</li>
        <li>用户权限管理</li>
        <li>数据备份配置</li>
      </ul>
    </div>
  </div>

  <!-- 菜单项3 -->
  <div class="menu-item">
    <div class="menu-header">
      <span class="menu-icon">ℹ️</span>
      <span class="menu-text">关于</span>
      <span class="expand-icon">▼</span>
    </div>
    <div class="menu-details">
      <p>版本：v1.0.0</p>
      <p>更新日期：2024-05-20</p>
      <p>开发团队：TechDev</p>
    </div>
  </div>
</div>

CSS 样式 #

/* 基础容器样式 */
.expandable-menu {
  width: 320px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* 菜单项样式 */
.menu-item {
  border-bottom: 1px solid #e0e0e0;
}
.menu-item:last-child {
  border-bottom: none;
}

/* 菜单头部样式 */
.menu-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-header:hover {
  background-color: #eeeeee;
}

.menu-icon {
  font-size: 18px;
  margin-right: 12px;
}

.menu-text {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.expand-icon {
  font-size: 14px;
  transition: transform 0.2s;
}
.expand-icon.expanded {
  transform: rotate(180deg);
}

/* 详情内容样式 */
.menu-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 16px;
  background-color: #fff;
}
.menu-details.expanded {
  max-height: 200px;
  padding: 12px 16px;
}

.menu-details p, .menu-details li {
  font-size: 14px;
  color: #666;
  margin: 4px 0;
}

JavaScript 交互 #

// 获取所有菜单头部元素
const menuHeaders = document.querySelectorAll('.menu-header');

// 为每个头部添加点击事件
menuHeaders.forEach(header => {
  header.addEventListener('click', () => {
    // 获取对应的详情元素和展开图标
    const details = header.nextElementSibling;
    const expandIcon = header.querySelector('.expand-icon');

    // 切换展开状态类
    details.classList.toggle('expanded');
    expandIcon.classList.toggle('expanded');
  });
});

功能说明 #

• 点击菜单头部即可展开/收起详情内容，后置图标会同步旋转
• 支持自定义主图标（可替换为字体图标或SVG）
• 详情区域可自由添加文本、列表等任意内容
• 样式可通过CSS调整颜色、间距、圆角等，适配不同设计需求

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