jquery插件制作 -- 6.手風琴Panel

　　我們今天要做的是手風琴panel，jquery.ui裡面有個叫做accordtion的插件，我們要實作的效果和他一樣。

　　首先我們還是建立一個html檔案，裡面包含如下的html結構。

　　然後為頁面定義如下css：

　　下面我們來介紹jquery.accordtion.js插件的實作。首先我們需要考慮的是如何隐藏pane裡面的内容部分，也就是p标簽。h1作為标題是不需要隐藏的。

　　頁面調用的代碼：

　　插件代碼很簡單，就是找到class為pane的div下面的p，對其隐藏。接下來我們要實作的是，當使用者點到h1的時候，對應的p标簽的内容顯示出來，同時其他h1對應的p标簽的内容隐藏。代碼如下：

　　現在我們的插件已經很有型了，最後要做的就是添加使用者自定義屬性options，這次我們隻添加一個‘預設顯示第幾個pane’的屬性。

　　謝謝大家的支援，希望本篇文章對你有幫助。如果對代碼哪裡有不清楚的地方，可以聯系我。

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>