如何用原生 JavaScript 实现点击标题展开对应段落（无 jQuery）

实现思路概述

要实现点击标题展开对应段落的效果，核心逻辑分为三个部分：首先是获取页面中所有的标题元素，然后为每个标题绑定点击事件，最后在点击事件中控制对应段落的显示与隐藏状态。整个过程不需要引入任何第三方库，仅使用原生JavaScript的DOM API即可完成。

基础HTML结构准备

首先我们需要准备对应的HTML结构，标题和对应的段落需要有明确的关联关系，这里采用相邻兄弟的结构，标题后面紧跟对应的段落元素，方便后续通过DOM方法查找对应内容。

<div class="collapse-container">
  <h3 class="collapse-title">第一个标题</h3>
  <p class="collapse-content">这是第一个标题对应的段落内容，默认情况下可以设置为隐藏状态，点击标题后展开显示。</p>
  
  <h3 class="collapse-title">第二个标题</h3>
  <p class="collapse-content">这是第二个标题对应的段落内容，同样默认隐藏，点击对应标题后才会展示给用户。</p>
  
  <h3 class="collapse-title">第三个标题</h3>
  <p class="collapse-content">这是第三个标题对应的段落内容，支持多个标题和段落的组合，交互逻辑统一处理。</p>
</div>

基础CSS样式设置

为了让展开收起的效果更直观，我们需要给段落设置默认的隐藏样式，同时可以添加过渡动画让显示隐藏的过程更平滑。这里通过display属性或者height属性配合overflow来实现隐藏效果，推荐使用display的方式更简单直接。

.collapse-content {
  display: none; /* 默认隐藏所有段落内容 */
  padding: 10px 0;
  line-height: 1.6;
  color: #333;
}

/* 可选：添加展开时的过渡效果 */
.collapse-content.show {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.collapse-title {
  cursor: pointer; /* 鼠标悬停时显示手型，提示可点击 */
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  margin: 0;
  color: #2c3e50;
}

.collapse-title:hover {
  color: #3498db; /* 悬停时改变标题颜色，提升交互体验 */
}

原生JavaScript实现逻辑

接下来是核心的JavaScript代码部分，我们可以通过两种方式实现：一种是给每个标题单独绑定点击事件，另一种是使用事件委托的方式，给容器绑定一次事件即可处理所有标题的点击，后者在标题数量较多或者动态添加标题的场景下性能更好。

方式一：单独绑定事件

这种方式适合标题数量固定且较少的场景，逻辑比较直观，直接遍历所有标题元素，逐个绑定点击事件。

// 获取所有标题元素
const titleList = document.querySelectorAll('.collapse-title');
// 遍历标题元素
titleList.forEach(function(title) {
  // 给每个标题绑定点击事件
  title.addEventListener('click', function() {
    // 找到当前标题后面的第一个段落元素，即对应的内容
    const content = this.nextElementSibling;
    // 判断当前内容是否显示
    if (content.style.display === 'block') {
      // 如果已经显示，就隐藏
      content.style.display = 'none';
    } else {
      // 如果隐藏，就显示
      content.style.display = 'block';
    }
  });
});

方式二：事件委托实现

事件委托是利用事件冒泡的原理，把事件绑定在父容器上，通过判断触发事件的目标元素是否是标题，来决定是否执行展开收起的逻辑，这种方式性能更优，也支持动态添加的标题元素。

// 获取容器元素
const container = document.querySelector('.collapse-container');
// 给容器绑定点击事件
container.addEventListener('click', function(event) {
  // 判断点击的目标元素是否是标题元素
  if (event.target.classList.contains('collapse-title')) {
    // 获取对应的段落内容
    const content = event.target.nextElementSibling;
    // 切换显示隐藏状态
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  }
});

功能扩展：手风琴效果实现

很多时候我们需要实现手风琴效果，也就是点击一个标题展开对应段落时，其他已经展开的段落自动收起，避免页面内容过长。只需要在展开当前段落之前，先隐藏所有其他段落即可。

// 获取容器和所有标题、内容元素
const container = document.querySelector('.collapse-container');
const allTitles = document.querySelectorAll('.collapse-title');
const allContents = document.querySelectorAll('.collapse-content');

// 事件委托绑定点击
container.addEventListener('click', function(event) {
  if (event.target.classList.contains('collapse-title')) {
    // 先隐藏所有内容
    allContents.forEach(function(item) {
      item.style.display = 'none';
    });
    // 再显示当前点击标题对应的内容
    const currentContent = event.target.nextElementSibling;
    currentContent.style.display = 'block';
  }
});

注意事项

• 确保HTML结构中标题和对应段落的相邻关系正确，否则nextElementSibling可能无法获取到正确的元素。
• 如果段落元素默认不是通过display:none隐藏，而是用height:0等方式，需要对应调整JavaScript中的判断逻辑。
• 事件委托的方式中，判断目标元素时可以根据实际类名调整，避免误判其他元素。
• 如果页面中有多个独立的折叠区域，可以给不同区域设置不同的容器类名，避免事件冲突。

原生JavaScript实现点击展开段落的核心就是DOM元素查找和事件绑定，掌握这两个基础能力后，可以灵活扩展出更多复杂的交互效果，不需要依赖任何第三方库也能满足大部分开发需求。

JavaScriptclick_eventdom_operationcollapse_effect修改时间：2026-07-13 04:54:24