JavaScript动态手风琴开发求助：员工层级展开与按钮图标切换实现

我来帮你一步步搞定这三个功能，结合你给出的部分代码，咱们拆解开来实现：

1. 将表格最后一列设置为可点击按钮 #

首先在动态生成表格行的逻辑里，给每行的最后一列插入按钮元素。这里我结合你提供的createAccordion思路完善代码：

function createEmployeeRow(employee) {
  const row = document.createElement("tr");
  
  // 先添加员工基础信息列（比如姓名、部门等）
  const nameCell = document.createElement("td");
  nameCell.textContent = employee.name;
  row.appendChild(nameCell);
  
  // ... 这里补充其他列的创建逻辑 ...
  
  // 最后一列添加折叠按钮
  const actionCell = document.createElement("td");
  const accordionButton = createAccordionButton(employee);
  // 绑定点击事件，传递当前员工和行元素
  accordionButton.addEventListener("click", () => toggleHierarchy(employee, row));
  actionCell.appendChild(accordionButton);
  row.appendChild(actionCell);
  
  return row;
}

// 封装按钮创建逻辑
function createAccordionButton(employee) {
  const accordionButton = document.createElement("button");
  accordionButton.className = "accordion";
  
  // 先判断是否有层级关系，决定初始图标
  const hasHierarchy = employee.superior || (employee.subordinates?.length > 0);
  const icon = document.createElement("span");
  icon.className = "accordion-icon";
  icon.textContent = hasHierarchy ? "+" : "";
  
  // 按钮文本
  const btnText = document.createTextNode("查看层级");
  accordionButton.appendChild(icon);
  accordionButton.appendChild(document.createTextNode(" ")); // 图标和文本间留空格
  accordionButton.appendChild(btnText);
  
  return accordionButton;
}

2. 点击按钮时展开对应员工的层级结构 #

接下来实现点击按钮后，在第一列插入员工的层级结构，同时做展开/收起的切换：

function toggleHierarchy(employee, parentRow) {
  const firstCell = parentRow.querySelector("td:first-child");
  const existingHierarchy = firstCell.querySelector(".hierarchy-container");
  const accordionIcon = parentRow.querySelector(".accordion-icon");
  
  // 如果已经展开，就收起
  if (existingHierarchy) {
    existingHierarchy.remove();
    accordionIcon.textContent = "+";
    return;
  }
  
  // 未展开则创建层级结构
  const hierarchyContainer = document.createElement("div");
  hierarchyContainer.className = "hierarchy-container";
  
  // 拼接层级HTML（假设员工数据有superior和subordinates字段）
  let hierarchyContent = "";
  if (employee.superior) {
    hierarchyContent += `<div>上级：${employee.superior.name}</div>`;
  }
  if (employee.subordinates?.length > 0) {
    hierarchyContent += `<div>下属：<ul>`;
    employee.subordinates.forEach(sub => {
      hierarchyContent += `<li>${sub.name}</li>`;
    });
    hierarchyContent += `</ul></div>`;
  }
  
  hierarchyContainer.innerHTML = hierarchyContent;
  firstCell.appendChild(hierarchyContainer);
  accordionIcon.textContent = "-";
}

3. 实现+/-切换图标（存在上级层级时） #

上面的代码已经包含了图标的切换逻辑，这里再补充CSS样式让图标更美观：

.accordion {
  padding: 6px 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
}

.accordion-icon {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-weight: bold;
  margin-right: 4px;
}

.hierarchy-container {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid #ccc;
}

额外注意点 #

• 确保你的员工数据结构包含superior（上级信息）和subordinates（下属列表）字段，否则层级内容无法正确渲染
• 如果需要更流畅的折叠动画，可以给.hierarchy-container添加max-height和transition属性实现渐变效果

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