在内容较长的页面中，一次性展示全部文本会让页面显得臃肿，也不利于用户快速浏览信息的框架。“展开更多”和“收起”这种交互模式，可以在紧凑的预览和完整的详细内容之间灵活切换，常见于文章摘要、课程介绍、产品描述等场景。
用 jQuery 实现这个效果的核心思路很直接：将超出预览范围的内容放在一个默认隐藏的元素中，通过按钮点击来切换这个元素的显示与隐藏，同时更新按钮文本和省略号标记的状态。
实现原理拆解
整个交互涉及三个 DOM 元素的协作：
-
省略号标记（
.dots）：在收起状态下显示......，暗示内容被截断。 -
隐藏内容区（
.more）：包含完整详细内容，默认不显示。 -
切换按钮（
.read）：用于触发展开和收起操作。
点击按钮时，jQuery 做了三件事：
-
切换按钮前一个兄弟元素（也就是
.more内容区）的可见状态，使用.toggle()。 -
切换省略号标记的可见状态，展开时隐藏省略号，收起时重新显示。
-
根据当前按钮文字决定切换到哪个文本——
Read More变为Read Less，反之亦然。
为什么用 .prev() 和 .siblings() 而不是直接用 ID 选择器？
这个写法让 HTML 结构和 JavaScript 逻辑之间的耦合度更低。按钮通过 .prev() 找到紧邻的内容区，通过 .siblings('.dots') 找到同级的省略号，整个模块不需要任何 ID 或额外的 class 标记就能独立运作。这意味着页面上可以放多个此类模块，每个按钮只管自己所在区域，互不干扰。如果换成固定 ID 来操作，每新增一个模块就要修改脚本，扩展性和可维护性都会明显下降。
语法要点
$(selector).prev().toggle(); // 切换前一个兄弟元素的显示/隐藏
$(selector).siblings('.dots').toggle(); // 切换同级 .dots 元素的显示/隐藏
$(selector).text(); // 获取或设置按钮的文本内容
示例代码
下面是一个完整的示例，模拟了课程介绍内容的“展开/收起”交互。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>展开更多 / 收起示例 · 编程学习</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
background-color: #fef9e7;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.container {
font-size: 18px;
max-width: 680px;
margin: 40px auto;
padding: 25px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
h1 {
color: #2c6e49;
font-size: 26px;
margin-top: 0;
}
.more {
display: none;
font-size: 18px;
line-height: 1.8;
}
.dots {
font-weight: bold;
letter-spacing: 2px;
}
button.read {
margin-top: 10px;
padding: 8px 20px;
background-color: #4a7c59;
border: none;
font-size: 16px;
cursor: pointer;
color: #fff;
border-radius: 4px;
outline: none;
}
button.read:hover {
background-color: #3b6448;
}
</style>
</head>
<body>
<section>
<div class="container">
<h1>前端开发零基础入门课程</h1>
<p>
本课程面向编程初学者，系统性讲解 HTML、CSS、JavaScript
三大前端基石，帮助你从零开始构建自己的网页项目。
<span class="dots">......</span>
</p>
<span class="more">
<p>课程共分为六大模块：</p>
<ul>
<li>模块一：Web 基础与开发环境搭建</li>
<li>模块二：HTML5 语义化标签与页面结构</li>
<li>模块三：CSS3 布局与响应式设计</li>
<li>模块四：JavaScript 核心语法与 DOM 操作</li>
<li>模块五：前端工程化与版本控制入门</li>
<li>模块六：综合实战——个人作品站搭建</li>
</ul>
<p>课程更新时间：2026 年。如有疑问可发送邮件至 alan@ebingou.cn。</p>
</span>
<button class="read">展开更多</button>
</div>
</section>
<script>
$(document).ready(function () {
$(".read").click(function () {
// 切换紧邻按钮之前的 .more 内容区
$(this).prev().toggle();
// 切换同级的省略号标记
$(this).siblings('.dots').toggle();
// 根据当前文本切换按钮文字
if ($(this).text() === '展开更多') {
$(this).text('收起');
} else {
$(this).text('展开更多');
}
});
});
</script>
</body>
</html>
点击“展开更多”后，隐藏的课程模块列表和补充信息会显示出来，省略号消失，按钮文字变为“收起”。再次点击恢复初始的紧凑预览状态。
本节课程知识要点
-
.prev() 定位相邻元素：
.prev()获取当前元素紧邻的前一个兄弟节点，适合在结构固定的 DOM 中做局部操作。 -
.siblings() 筛选同级元素：通过传入选择器参数，可以精确定位同级中特定类名的元素，避免波及无关节点。
-
.toggle() 简化显隐切换：无需手动判断当前状态再调用
.show()或.hide()，一个方法自动完成切换。 -
.text() 同时用于读取和设置：
.text()不带参数时返回当前文本内容，带参数时则设置新文本，在状态切换中非常实用。 -
模块独立性：通过相对遍历方法（
.prev()、.siblings()）而非固定 ID 操作 DOM，使每个模块独立运作，页面上可放置多个展开/收起组件而无需修改脚本。
个人经验与实用建议
在项目中，我习惯把这种“展开/收起”组件封装成一个通用模块。页面上可能有课程列表、文章摘要、用户评价等多个地方用到，它们唯一的区别就是内容不同，交互逻辑一致。只要按钮、.more 和 .dots 三者的相对位置保持不变，同一段 jQuery 脚本就能复用。
如果你的项目里同时在使用 Bootstrap 这类 UI 框架，注意框架自带的 .toggle() 方法与 jQuery 的 .toggle() 行为不同。Bootstrap 的 toggle 是通过 data-toggle 属性触发，走的是框架事件机制；jQuery 的 .toggle() 是直接操作元素的 display 属性。两者混用时可能会相互覆盖状态，排查时先确认是哪个库在控制显示隐藏逻辑，能更快定位问题。
如果页面需要支持 SEO，补充内容部分不应使用 display: none 做初始隐藏，搜索引擎可能因此忽略其中的文本。更好的做法是服务端渲染时就将完整内容输出，前端用 CSS max-height 配合 overflow: hidden 做视觉截断，再用 jQuery 切换一个展开类名来控制高度。这样既保证了 SEO 友好性，用户看到的交互效果也没有区别。
