包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字，不会干扰其他第三方插件 。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护 。
维护链接性jQuery 的一个优势是允许您使用任何类型的选择器 。但是，必须记住，您的插件可以处理几种不同的元素类型 。
使用 this 关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型 。如果在 each 循环前使用 return 关键字，就可以使用您的插件维护链接性 。
清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环 。code 3. 在 each 循环之前使用 return 关键字（function($) { $.fn.accordion = function() { return this.each(function（) { // 使用 return }); };})(jQuery)；有了Code 3 的代码后，示例 accordion 插件可用在一个方法调用链中 。
有了链接性（另一个强大的 jQuery 特性），您的插件就可用在一个方法调用链中 。例如，下面的代码显示了如何淡出 HTML 元素，并在单一的方法调用链中将其从文档对象模型 （DOM） 中删除 。
$（"#my-div"）.fadeOut().remove（)；构造一个 accordion一个典型的层叠设计包括标题栏和相关内容区域 。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用 。
清单 4 中的 HTML 结构是一个定义列表，含有四个标题以及相应的内容区域 。Code 4. 单一方法调用链
- 第1部分 内容一 第2部分 内容二 第3部分 内容三 第4部分 内容四
没有应用任何 CSS，这个 accordion 结构看起来类似于图 1 中的基础设计为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”Code 5. CSS部分.accordion { width: 500px; border: 1px solid #ccc; border-bottom: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}.accordion dt, .accordion dd { border-bottom: 1px solid #ccc; margin: 0px;}.accordion dt { background: #eaeaea; cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: bold;}.accordion dd { padding: 12px 8px；}效果如下图：自定义插件要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery 插件的函数 。accordion 插件从遍历所有已定义的 accordion 开始 。
要定义一个 accordion，在 HTML 文档或外部嵌入式 JavaScript 文件中使用下列 jQuery 。$('dl#my-accordion').accordion（)；对于每个 Accordion，您可以使用 jQuery 的 children 方法访问相关定义的标题，返回一个数组或 dt 元素 。
应用一个 click 事件到 dt 元素，然后一个名为 reset 方法应用到每个 dt 。accordion 首次加载时，该 reset 方法会折叠所有 dd 元 。
文章插图