如何用JavaScript实现HTML中多个可展开卡片的独立展开功能？

核心思路 #

给每个"more info"按钮绑定点击事件，点击时定位到当前按钮所属的卡片，切换该卡片内详细内容的显示状态——通过CSS类控制隐藏/展开，确保只操作目标卡片，不会影响其他卡片。

完整代码示例 #

HTML结构

每个卡片包含标题、触发按钮和默认隐藏的详细内容：

<div class="card">
  <h3>卡片标题1</h3>
  <button class="more-btn">more info</button>
  <div class="card-content">
    这是卡片1的专属详细内容，点击按钮可以展开或收起。
  </div>
</div>
<div class="card">
  <h3>卡片标题2</h3>
  <button class="more-btn">more info</button>
  <div class="card-content">
    这是卡片2的专属详细内容，点击按钮可以展开或收起。
  </div>
</div>

CSS样式

默认隐藏详细内容，通过active类控制显示：

.card {
  border: 1px solid #ddd;
  padding: 1.2rem;
  margin: 1rem 0;
  border-radius: 6px;
  width: 300px;
}

.card-content {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  color: #555;
}

/* 展开时的样式 */
.card-content.active {
  display: block;
}

JavaScript逻辑

绑定点击事件，定位目标卡片并切换内容状态：

// 获取所有"more info"按钮
const moreButtons = document.querySelectorAll('.more-btn');

moreButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 找到当前按钮所在的卡片容器
    const parentCard = this.closest('.card');
    // 定位卡片内的详细内容区域
    const contentArea = parentCard.querySelector('.card-content');
    // 切换显示/隐藏类
    contentArea.classList.toggle('active');
    // 可选：切换按钮文字，提升交互体验
    this.textContent = contentArea.classList.contains('active') ? 'less info' : 'more info';
  });
});

关键细节说明 #

• closest('.card')：向上查找最近的卡片父元素，精准定位当前操作的卡片，避免影响其他卡片。
• classList.toggle('active')：通过切换CSS类控制显示状态，比直接修改style.display更灵活，还能轻松添加过渡动画（比如给.card-content加transition: max-height 0.3s ease）。
• 事件委托（可选优化）：如果卡片是动态生成的，可以用事件委托绑定到父容器，避免重复绑定事件：

document.querySelector('.card-container').addEventListener('click', function(e) {
  if (e.target.classList.contains('more-btn')) {
    const parentCard = e.target.closest('.card');
    const contentArea = parentCard.querySelector('.card-content');
    contentArea.classList.toggle('active');
    e.target.textContent = contentArea.classList.contains('active') ? 'less info' : 'more info';
  }
});

此时需要给所有卡片加一个共同的父容器<div class="card-container">。

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