用jQuery封装一个手风琴自定义插件/组件

1.需求：用jQuery封装一个手风琴自定义插件
2.何为插件/组件：拥有独立的HTML，css，js和数据可重用的页面区域
3.何时使用：如果页面中，某个功能区域可能被重复使用时，都可将其封装为一个组件。
4.自定义插件：已经用html，css和js 实现了插件的样式和功能。
5.如何自定义插件：
5.1.将插件相关的css，剪切到一个独立的css文件中保存。为避免插件/组件间class冲突，一个组件内的选择器，都要以插件的父元素的class作为查找的开头、起点。
5.2定义独立的js文件：在jquery的原型对象中添加插件/组件函数：
①添加样式
②添加行为
封装方法参考jQueryUI的用法。
6.实现过程：（jQuery学习版本：js/jquery-1.11.3.js）
6.1创建独立的css文件：accordion.css（样式如下：）

  .accordion{width:80%; margin:0 auto;}
  .accordion>.title{
		background:#eee; border:1px soild #aaa;
		padding:6px; font-size:1.5em; 
		font-weight:bold; cursor:pointer;
  }
.accordion>.content{
  border-left:1px solid #eee;
  border-right:1px solid #eee;
}
.accordion>:last-child{
  border-bottom:1px solid #eee;
}
.accordion .fade{
  height:0;
  opacity:0;
  overflow:hidden;
  transition:all .5s linear;
}
.accordion .in{
  height:84px;
  opacity:1;
}

6.2定义独立的js文件：accordion.（参考如下代码：）

jQuery.fn.accordion = function() {
// 因为外面调用的是已经获取的jquery对象，所以此时直接用this即可
var $parent = this;
// 先定义样式，侵入css
// 1给父元素自己添加.accordion,此时返回的是$parent，2再给$parent下的奇数行div添加.title
//3再给.title下的相邻兄弟元素添加.content .fade,此时返回的是所有的content
//4.再给第一个content添加.in
$parent.addClass("accordion").children(":nth-child(2n+1)").addClass("title")
.next().addClass("content fade").first().addClass("in");

//添加行为，定义对html的操作
//1先查找需要绑定事件处理的元素，为父元素.accordion。2通过事件委托，绑定点击事件，事件绑定在.title上
//3.查找需要修改的元素，即点击.title的相邻的兄弟元素.content。调用toggleClass()函数，当.content上有.in时，
// 则移除.in,使div关闭。否则添加.in，使之显示。4如果.content的其他兄弟元素上有.in时，则移除.in 
$parent.on("click", ".title", function() {
    $(this).next(".content").toggleClass("in")
    .siblings(".content").removeClass("in")
})}

6.3 html文件中引入js和css：
头部先引入自定义css文件和使用的jQuery版本文件，最后引入自定义js文件，如下：


6.3实现效果下图：

7.说明：仅供参考使用，转载请注明出处。