如何实现点击任意Section时多Section联动折叠/展开？

方法一：纯CSS实现（无需JavaScript） #

这种方法通过调整HTML结构，利用CSS的兄弟选择器实现同步控制，适合简单场景。

修改后的HTML #

<div class="collapse-container">
  <!-- 共用的复选框，放在容器最外层 -->
  <input class="collapse-input" type="checkbox" />
  <section class="collapse">
    <p class="collapse-title">First Section</p>
    <p class="collapse-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section class="collapse">
    <p class="collapse-title">Second Section</p>
    <p class="collapse-content">
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </section>
</div>

修改后的CSS #

.collapse-container {
  display: grid;
  grid-template-columns: 50% 50%;
  position: relative; /* 给复选框定位用 */
}

.collapse-input {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1; /* 确保复选框能接收点击事件 */
}

/* 选中状态下，控制所有collapse-content展开 */
.collapse-input:checked ~ .collapse .collapse-content {
  height: auto;
}

.collapse {
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}

.collapse-content {
  transition: .2s ease-in;
  width: 100%;
  height: 0;
  overflow: hidden; /* 确保收起时内容完全隐藏 */
}

核心逻辑 #

• 将单个复选框移到容器最外层，点击容器内任意区域都会触发状态切换
• 用~ .collapse .collapse-content选择器，一次性控制所有内容区域的显示/隐藏

方法二：JavaScript实现（不改动原有HTML结构） #

如果不想调整布局，可通过JS同步两个复选框的状态，适合已有固定结构的场景。

修改后的HTML（仅添加id） #

<div class="collapse-container">
  <section class="collapse">
    <input id="input1" class="collapse-input" type="checkbox" />
    <p class="collapse-title">First Section</p>
    <p class="collapse-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section class="collapse">
    <input id="input2" class="collapse-input" type="checkbox" />
    <p class="collapse-title">Second Section</p>
    <p class="collapse-content">
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </section>
</div>

添加JavaScript代码 #

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

// 点击任意复选框时，同步另一个的状态
input1.addEventListener('click', () => input2.checked = input1.checked);
input2.addEventListener('click', () => input1.checked = input2.checked);

核心逻辑 #

• 通过DOM获取两个复选框元素
• 绑定点击事件，将当前复选框的checked状态同步给另一个，实现联动

补充：React环境下的实现（更简洁） #

如果是React项目，直接用状态管理即可，无需依赖复选框或原生JS监听：

import { useState } from 'react';

function CollapseSections() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapse-container">
      <section className="collapse" onClick={() => setIsOpen(!isOpen)}>
        <p className="collapse-title">First Section</p>
        <p className={`collapse-content ${isOpen ? 'open' : ''}`}>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </p>
      </section>
      <section className="collapse" onClick={() => setIsOpen(!isOpen)}>
        <p className="collapse-title">Second Section</p>
        <p className={`collapse-content ${isOpen ? 'open' : ''}`}>
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </section>
    </div>
  );
}

对应CSS调整 #

.collapse-content.open {
  height: auto;
}

核心逻辑 #

• 用React的useState维护全局展开状态isOpen
• 点击任意section时切换状态，两个内容区域根据状态值控制显示/隐藏

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