为现有可折叠无序列表添加一键展开/折叠全部按钮功能求助

你可以按照以下步骤修改代码实现需求：

1. 修改HTML结构 #

在.expandCollapse容器最顶部新增一键切换按钮：

<div class="expandCollapse">
  <!-- 新增的全量切换按钮 -->
  <button id="toggleAll">Expand All</button>
  <section id="teams">
    <h2>Fruits</h2>
    <div class="panel">
      <ul>
        <li>
          <a href="bio/bio1.html"> Mango</a>
        </li>
      </ul>
    </div>
  </section>
  <section>
    <h2>Ghadarite</h2>
    <div class="panel">
      <ul>
        <li>
          <a href="bio/bio2.html">Potato(c. 1864-1928)</a>
        </li>
        <li>
          <a href="bio/bio3.html">Onions(c. 1884-1962)</a>
        </li>
        <li>
          <a href="bio/bio4.html"> Pepper (1886-1921)</a>
        </li>
        <li>
          <a href="bio/bio5.html">Gobind Behary Lal (1889-1982)</a>
        </li>
      </ul>
    </div>
  </section>
</div>

2. 扩展JS功能 #

修改原有JS代码，新增全量切换逻辑：

function expandCollapse() {
  var theHeaders = document.querySelectorAll('.expandCollapse h2'),
    i,
    // 新增：获取全选按钮、存储面板按钮集合
    toggleAllBtn = document.getElementById('toggleAll'),
    panelButtons = document.querySelectorAll('.expandCollapse button[aria-expanded][aria-controls]');

  // 新增：统一修改所有面板状态的公共方法
  function setAllPanelsState(isExpanded) {
    panelButtons.forEach(btn => {
      btn.setAttribute('aria-expanded', isExpanded);
      document.getElementById(btn.getAttribute('aria-controls')).toggleAttribute('hidden', !isExpanded);
    });
    toggleAllBtn.textContent = isExpanded ? 'Collapse All' : 'Expand All';
  }

  for (i = 0; i < theHeaders.length; i++) {
    var thisEl = theHeaders[i],
      theId = 'panel-' + i;
    var thisTarget = thisEl.parentNode.querySelector('.panel');
    if (!thisTarget) {
      continue;
    }
    thisEl.innerHTML = '<button aria-expanded="false" aria-controls="' + theId + '">' + thisEl.textContent + '</button>';
    thisTarget.setAttribute('id', theId);
    thisTarget.setAttribute('hidden', 'true');
  }

  // 重新获取初始化完成的面板按钮集合
  panelButtons = document.querySelectorAll('.expandCollapse button[aria-expanded][aria-controls]');

  // 单个面板点击事件
  for (i = 0; i < panelButtons.length; i++) {
    panelButtons[i].addEventListener('click', function(e) {
      var thisButton = e.target;
      var state = thisButton.getAttribute('aria-expanded') === 'false' ? true : false;
      thisButton.setAttribute('aria-expanded', state);
      document.getElementById(thisButton.getAttribute('aria-controls')).toggleAttribute('hidden', !state);

      // 可选优化：单个面板切换时自动同步全选按钮文字
      var allExpanded = Array.from(panelButtons).every(btn => btn.getAttribute('aria-expanded') === 'true');
      var allCollapsed = Array.from(panelButtons).every(btn => btn.getAttribute('aria-expanded') === 'false');
      if (allExpanded) toggleAllBtn.textContent = 'Collapse All';
      if (allCollapsed) toggleAllBtn.textContent = 'Expand All';
    });
  }

  // 新增：全选按钮点击事件
  toggleAllBtn.addEventListener('click', function() {
    var shouldExpand = toggleAllBtn.textContent === 'Expand All';
    setAllPanelsState(shouldExpand);
  });
}
expandCollapse();

功能说明 #

• 默认按钮显示Expand All，点击后所有折叠面板全部展开，按钮自动切换为Collapse All
• 再次点击全选按钮，所有面板全部折叠，按钮文字恢复初始状态
• 开启可选优化逻辑后，手动逐个展开/关闭所有面板时，全选按钮的文字会自动同步当前状态

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