如何创建带垂直分区格式的Accordion条目（表格行点击展开式）

下面是一套原生HTML/CSS/JS实现的方案，完全贴合你要的「表格结构+点击行展开内容」的需求：

1. HTML结构 #

用标准表格搭建框架，每个折叠单元由「触发行」和「内容行」组成，内容行通过colspan实现跨列填充：

<table class="accordion-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>名称</th>
      <th>类别</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一组折叠项 -->
    <tr class="accordion-header">
      <td>1</td>
      <td>项目A</td>
      <td>工具类</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <div class="content-inner">
          <h4>项目A详情</h4>
          <p>这是项目A的具体描述内容，包含功能介绍、使用场景等信息。</p>
          <ul>
            <li>特性1：支持多平台</li>
            <li>特性2：轻量化设计</li>
          </ul>
        </div>
      </td>
    </tr>
    <!-- 第二组折叠项 -->
    <tr class="accordion-header">
      <td>2</td>
      <td>项目B</td>
      <td>服务类</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <div class="content-inner">
          <h4>项目B详情</h4>
          <p>项目B主要提供后端服务支持，包含API接口、数据处理模块。</p>
          <p>部署方式：Docker容器化部署</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

2. CSS样式 #

保证表格布局规整，默认隐藏内容行，添加交互反馈：

.accordion-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

.accordion-table th,
.accordion-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ddd;
}

.accordion-table thead tr {
  background-color: #f5f5f5;
  font-weight: bold;
}

.accordion-header {
  cursor: pointer;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #fafafa;
}

.accordion-content {
  display: none;
  background-color: #fff;
}

.accordion-content.active {
  display: table-row;
}

.content-inner {
  padding: 10px 0;
}

3. JS交互逻辑 #

实现点击触发行切换内容显示状态，可选单开模式（同一时间仅展开一个）：

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const contentRow = header.nextElementSibling;
    contentRow.classList.toggle('active');
    
    // 注释掉下面这段即可开启多开模式
    accordionHeaders.forEach(otherHeader => {
      if (otherHeader !== header) {
        otherHeader.nextElementSibling.classList.remove('active');
      }
    });
  });
});

核心特性说明 #

• 完全基于表格结构，垂直分区的排版和原生表格一致，无需额外布局兼容
• 触发行自带hover反馈，提升用户感知
• 支持单开/多开两种模式，通过注释JS代码即可切换
• 内容行可自由填充任意HTML内容，格式化不受限制

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