首页/新闻资讯/正文详情

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

发布时间:2026/11/5 1:30:31 来源:云帆数科 栏目:资讯中心
轻量级 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),仅供参考

相关推荐

气象数据接入天气预报
气象数据接入天气预报

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 1:29:31

Ubuntu20.04.6安装RTXPRO6000驱动
Ubuntu20.04.6安装RTXPRO6000驱动

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 1:29:31

从 ChatGPT 到 Word:如何快速精确删除中英混排中的多余空格
从 ChatGPT 到 Word:如何快速精确删除中英混排中的多余空格

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 1:29:31

C# ECharts模型库:解决序列化乱码与运行时崩溃问题
C# ECharts模型库:解决序列化乱码与运行时崩溃问题

简介:这是一套专为C# MVC开发者设计的ECharts模型层建模库,解决.NET后端与前端图表库深度集成难题,显著降低数据可视化开发门槛。资源共369个文件,涵盖110个核心C#模型类(如图表配置、坐标轴、系列项等)、8… · 2026/11/5 2:17:49

企业知识库搭建指南:架构、工具与实战
企业知识库搭建指南:架构、工具与实战

1. 知识库搭建的核心价值与场景解析十年前我刚入行时,第一次听说"知识库"这个概念还以为是图书馆的数字版本。直到参与企业级文档管理系统建设才明白,真正的知识库是能让你在3秒内找到三年前某个项目的技术方案,在会议前5分钟快速调… · 2026/11/5 2:17:49

云原生AI模型版本管理:原理与实践
云原生AI模型版本管理:原理与实践

1. 云原生AI模型版本管理的核心价值在AI工程化实践中,模型版本管理正成为MLOps流程中最关键的痛点之一。我们团队在金融风控场景中曾经历过这样的困境:某次模型迭代后AUC指标意外下降5个百分点,但由于缺乏规范的版本追踪,花了整整… · 2026/11/5 2:17:48

虚拟电厂行业早报(11月4日)|贵州能源集团568万建平台,365天含3个月试运行
虚拟电厂行业早报(11月4日)|贵州能源集团568万建平台,365天含3个月试运行

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/5 2:17:48

C#强类型ECharts图表配置模型库:告别JSON拼接
C#强类型ECharts图表配置模型库:告别JSON拼接

简介:C# For ECharts 模型层建模库是面向.NET开发者,特别是使用ASP.NET MVC框架构建数据可视化应用的中高级工程师的高效工具。它解决了在C#后端直接生成ECharts标准配置JSON的痛点,避免手动拼接、类型错配与结构维护困难等问题,显… · 2026/11/5 2:17:48

键盘与鼠标:结构原理与选购指南
键盘与鼠标:结构原理与选购指南

1. 键盘与鼠标:人机交互的核心工具键盘和鼠标作为计算机最基础的输入设备,它们的设计原理和结构直接影响着我们的工作效率和使用体验。作为一名长期与各种输入设备打交道的技术爱好者,我深刻理解选择合适设备的重要性。不同类型的键盘和鼠标在… · 2026/11/5 2:16:48

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

多智能体协作系统架构设计与实践优化
多智能体协作系统架构设计与实践优化

1. 多智能体协作系统的时代背景2017年Transformer架构的诞生彻底改变了人工智能的发展轨迹。当行业还沉浸在单一大模型带来的性能突破时,Anthropic的研究团队已经将目光投向了更前沿的领域——如何让多个智能体通过协作产生超越单体能力的系统智能。这就像交响乐团中… · 2026/11/5 0:00:39

大模型系统性入门实战指南:从原理到部署微调的全链路路线
大模型系统性入门实战指南:从原理到部署微调的全链路路线

提到大模型的系统性入门,我先说个结论:这事真不难,难的是资料太散、路线太多,今天这个框架明天那个工具,新人很容易在“收藏夹吃灰”和“教程看到一半放弃”之间反复横跳。市面上关于大模型的内容少说有几十万篇&#… · 2026/11/5 0:00:39

鸿蒙文件系统沙箱机制解析与开发实践
鸿蒙文件系统沙箱机制解析与开发实践

1. 鸿蒙文件系统沙箱机制深度解析作为一名从Android转向鸿蒙开发的工程师,我深刻体会到文件系统访问是迁移过程中最先遇到的"拦路虎"。在Android上运行良好的文件读写代码,在鸿蒙真机环境却频频出现文件写入后神秘消失或直接抛出权限拒绝错误的… · 2026/11/5 0:00:39

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 6:59:29

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 7:02:38

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码