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.說明：僅供參考使用，轉載請注明出處。