React Accordion激活内容时如何让"-"符号背景色纵向延伸

要实现右侧-/+符号的背景色和展开的内容区域高度一致，核心是调整布局结构，让符号容器和标题+内容区域处于同一层级，利用flex布局让符号容器的高度自动匹配整体高度。具体步骤如下：

1. 调整React组件结构 #

把原来放在accordionTitle里的accordionBullet移出来，作为accordionItem的直接子元素，和标题+内容容器并列：

const [isActive, setIsActive] = useState(false);

<div className="support"> 
  <div className='containerFour'>
    <h1>FAQ</h1>
    <h1>Tell us what you're searching for</h1>
    <div className="accordion">
      <div className="accordionItem">
        {/* 左侧容器：包含标题和展开内容 */}
        <div className="accordionMain">
          <div className="accordionTitle" onClick={() => setIsActive(!isActive)}>
            <h1 className='accordionH'>What payment methods are available to complete your purchase?</h1>
          </div>
          {isActive && <div className="accordionContent">Test</div>}
        </div>
        {/* 右侧符号容器，新增点击事件提升交互体验 */}
        <div className='accordionBullet' onClick={() => setIsActive(!isActive)}>
          {isActive ? <img src={Close} /> : <img src={Open}/>}
        </div>
      </div>
    </div>
  </div>
</div>

2. 修改CSS样式 #

通过flex布局让符号容器高度匹配左侧区域，同时统一背景色设置：

.support .accordion {
  width: 811px;
  margin-left: auto;
  margin-right: auto;
}

.support .accordionItem {
  margin-bottom: 1.5rem;
  display: flex; /* 关键：让左右两个容器并排 */
}

/* 左侧标题+内容容器：占满剩余空间，统一背景色 */
.support .accordionMain {
  flex: 1;
  background-color: #D9D9D9;
}

.support .accordionBullet {
  background-color: #205696;
  width: 60px; /* 根据需求调整符号容器宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 给图标加内边距，避免太靠边 */
.support .accordionBullet img {
  padding: 1rem;
}

.support .accordionTitle {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 1rem; /* 标题内容加内边距，提升视觉效果 */
}

.support .accordionH {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #000000;
  margin: 0; /* 去掉h1默认margin，避免多余间距 */
}

.support .accordionContent {
  padding: 0 1rem 1rem; /* 内容区域内边距和标题对齐 */
}

原理说明 #

原来的结构中，符号容器是标题的子元素，高度只能和标题一致。调整后，accordionItem使用flex布局，左侧容器占满剩余空间，右侧符号容器的高度会自动匹配左侧标题+展开内容的总高度，从而实现背景色纵向延伸的效果。

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