简化多组展开/收起按钮的交互逻辑：用 jQuery 一行绑定实现批量控制

心靈之曲

发布时间：2026-02-07 16:53:54

216人浏览过

来源于php中文网

原创

简化多组展开/收起按钮的交互逻辑：用 jQuery 一行绑定实现批量控制

本文介绍如何将重复冗长的原生 javascript 事件监听代码，精简为仅需两行 jquery 的通用解决方案，统一处理多个“see more / see less”切换按钮及对应 copy 按钮的显隐与文本切换。

在实际开发中，面对多个结构一致的折叠面板（如信息卡片），若为每个按钮单独编写 addEventListener 和条件判断逻辑，不仅代码冗余、难以维护，还极易因索引错位引发 Bug。jQuery 提供了简洁高效的 DOM 遍历与事件委托能力，可将原本需重复三次（甚至更多）的逻辑，压缩为一次选择器匹配 + 一行事件处理。

✅ 核心优化方案

只需在页面引入 jQuery 后，添加以下两行脚本即可完成全部功能：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

下载

? 原理说明

$('.SM') 一次性选取所有 class="SM" 的按钮，无需手动遍历 getElementsByClassName 数组；
$(this).next('.Copy') 利用 jQuery 的 .next() 方法精准定位同级下一个 .Copy 按钮（HTML 中 .Copy 确实紧邻 .SM），避免依赖索引匹配，结构更健壮；
.text((i, text) => ...) 是 jQuery 的回调语法，自动传入当前元素的原始文本，实现无状态切换；
toggle() 内置显隐逻辑，比手动设置 display: block/none 更安全可靠。

⚠️ 注意事项

必须确保 jQuery 已加载：

如何用单个函数高效管理多个按钮的点击交互

如何让 JavaScript 控制的元素显示/隐藏功能可重复触发？

如何正确使用 JavaScript 动态更换 div 的背景图而不失真？

如何用 HTML、CSS 和 JavaScript 实现平滑轮播图动画效果

如何使用 JavaScript 动态设置 DOM 元素的 CSS 样式

相关标签:

css javascript java jquery html js ajax 浏览器 ai cdn 代码可读性 jquery less class 委托 copy JS 事件 dom this alert 选择器 display https bug

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何使用 jQuery 基于未选中复选框动态显示/隐藏表格行下一篇：JavaScript 动态创建元素后立即消失的解决方案

作者最新文章

银河麒麟操作系统激活全攻略：常见问题与解决方法

2026-02-04 16:36

Laravel 登录页面提示“Page Expired”的根本原因与解决方案

2026-02-04 16:40

如何在 Go 中安全并发请求多个 URL 并避免 EOF JSON 解析错误

2026-02-04 16:45

如何在 Go REST 服务中正确处理 POST 请求的数据参数

2026-02-04 16:46

如何彻底解决网页页脚下方出现巨大空白的问题（新手友好教程）

2026-02-04 16:49

铁路12306如何办理车辆托运

2026-02-04 16:50

银河麒麟桌面系统卸载应用报错的快速解决方案

2026-02-04 17:00

如何在函数外部访问由函数生成的 Pandas DataFrame

2026-02-04 17:20

PHP 中合并多个学生成绩数组并按 student_id 去重合并

2026-02-04 17:24

如何递归遍历任意深度嵌套的多维数组（支持 foreach 与 for 循环）

2026-02-04 17:37

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

152

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

313

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

399

2023.11.10