资讯详情

轻量级 jQuery 折叠插件 jQuery-Collapse:3 分钟读懂内容渐进式披露的终极方案

📅 2026/11/5 1:31:03 | 华诺云谱 👁 阅读
轻量级 jQuery 折叠插件 jQuery-Collapse:3 分钟读懂内容渐进式披露的终极方案
【免费下载链接】jQuery-CollapseA lightweight (~1kb) jQuery plugin that enables expanding and collapsing content项目地址https://gitcode.com/gh_mirrors/jq/jQuery-Collapse点击查看免费下载网页内容太多时直接全部展示会让用户感到 overwhelmed信息过载。jQuery-Collapse正是一个解决这个问题的轻量级 jQuery 折叠插件它仅约1kb压缩后 ~1.2kb就能让你的页面内容实现「渐进式披露」progressive disclosure——先展示标题点击后再展开详情。无论你是新手还是老手3 分钟即可读懂它的核心玩法。为什么选择 jQuery-Collapse✨特性说明 极致轻量约 1.2kbmin gzip加载几乎无感♿ 无障碍友好内置 WAI-ARIA 属性aria-expanded、aria-hidden屏幕阅读器也能正确识别 浏览器兼容兼容 IE6、Firefox、Safari、Chrome、Opera要求 jQuery ≥ 1.7.0 手风琴模式同一容器内展开一节时自动收起其他节 状态持久化记住用户展开/收起的区块刷新页面不丢失核心实现非常小巧整个插件只有 173 行代码入口文件见 src/jquery.collapse.js。快速上手3 步开启内容折叠 第 1 步引入两个脚本jQuery 插件本体script srcjquery.min.js/script script srcjquery.collapse.js/script第 2 步给容器加上data-collapse属性。插件会自动把容器内的元素按「成对」处理——奇数项当标题偶数项当可折叠内容div>h2 classopen我默认是展开的/h2就这么简单——data-collapse属性会自动触发脚本无需任何手动初始化。两大进阶玩法手风琴 状态持久化 手风琴模式Accordion在属性值中写入accordion即可实现「展开一个、收起其他」的经典手风琴交互div>script srcjquery.collapse.js/script script srcjquery.collapse_storage.js/script插件会优先使用 HTML5localStorage不可用时自动降级到 Cookie再不行就优雅退化为普通折叠功能不受影响只是不记忆状态。持久化核心读写逻辑位于 src/jquery.collapse_storage.js针对 IE6-7 的 Cookie 降级方案在 src/jquery.collapse_cookie_storage.js。 两种模式可以叠加data-collapseaccordion persist。常用配置选项与事件速查 ⚙️不满足于 HTML 属性写法可以用 jQuery 方式初始化并传参见 src/jquery.collapse.js选项类型作用open/close函数自定义展开/收起动画如this.slideDown(100)accordion布尔开启手风琴模式persist布尔开启状态持久化query字符串自定义标题元素的选择器适配复杂 DOM 结构clickQuery字符串指定标题内哪个元素响应点击避免与标题里的超链接冲突事件方面监听状态变化bind(opened)/bind(closed)主动控制对容器触发open全部展开、close全部收起、toggle切换事件即可。例如「一键展开全部」只需一行$(#demo).trigger(open)。项目结构与延伸阅读 路径说明src/jquery.collapse.js插件核心折叠、手风琴、ARIA 属性、事件分发src/jquery.collapse_storage.jslocalStorage 持久化模块src/jquery.collapse_cookie_storage.jsIE6-7 Cookie 降级方案demo/demo.html官方演示页涵盖默认/手风琴/持久化/自定义动画等全部示例test/CoffeeScript 测试用例Mocha Chai SinonREADME.md完整 API 文档LICENSEMIT / BSD / GPL 多协议想本地跑起来克隆仓库后执行npm install npm testKarma 会自动打开 Chrome 和 Firefox 运行测试。git clone https://gitcode.com/gh_mirrors/jq/jQuery-Collapse总结jQuery-Collapse 用不到 1kb 的体积、173 行源码提供了折叠、手风琴、持久化、自定义动画、无障碍支持等一整套内容渐进式披露能力。对于 FAQ 页面、产品参数页、长文章目录等场景它是一个「小而美」的终极选择。打开 demo/demo.html 亲手点一点感受它顺滑的交互吧赞分享【免费下载链接】jQuery-CollapseA lightweight (~1kb) jQuery plugin that enables expanding and collapsing content项目地址https://gitcode.com/gh_mirrors/jq/jQuery-Collapse点击查看免费下载相关推荐告别复杂配置OpenCore Auxiliary Tools 让你10分钟搞定黑苹果告别复杂配置OpenCore Auxiliary Tools 让你10分钟搞定黑苹果 还在为黑苹果配置头疼吗 面对复杂的plist文件和繁琐的驱动设置桌面应用开发工具KOReader 电子墨水阅读器指南让 PDF 和 EPUB 在小屏上读得舒服的完整路径KOReader 电子墨水阅读器指南让 PDF 和 EPUB 在小屏上读得舒服的完整路径 KOReader 是一款面向 Kindle、Kobo、PocketB嵌入式桌面应用实战微调 Surya OCR为业务场景打造专属文档识别模型实战微调 Surya OCR为业务场景打造专属文档识别模型 Surya 是一个支持 90 多种语言的文档 OCR 项目一次推理同时给出文字识别、版面布局、阅计算机视觉深度学习文档上一篇解锁Wii U游戏内容cdecrypt解密工具全解析下一篇胡桃工具箱把原神账号数据、祈愿记录与养成规划搬到桌面端的开源方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
📝

华诺云谱内容团队

资深建站顾问 · 行业研究员

10年+企业数字化服务经验,专注智能建站、SEO优化与品牌营销,持续输出建站技巧、行业洞察与营销干货,已帮助5000+企业实现数字化增长。

你可能需要的服务

订阅华诺云谱资讯周报

每周一封,精选建站技巧、SEO与营销干货,直达邮箱。已有 8,000+ 企业主订阅,助你少走弯路。

↑