 
<div id="pane-container"> 
　　<div class="pane"> 
　　　　<h1>first pane</h1> 
　　　　<p>this script should allow only one pane to be visible at a time.</p> 
　　</div> 
　　<div class="pane"> 
　　　　<h1>second pane</h1> 
　　　　<p>this script should allow only one pane to be visible at a time.</p> 
　　</div> 
　　<div class="pane"> 
　　　　<h1>third pane</h1> 
　　　　<p>this script should allow only one pane to be visible at a time.</p> 
　　</div> 
</div>　　 

然后為頁面定義如下css：

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
#pane-container 
{ 
margin: 0; 
padding: 0; 
width: 200px; 
} 
.pane h1 
{ 
padding: 5px; 
cursor: pointer; 
position: relative; 
background-color: #4c4c4c; 
color: #fff; 
font-weight: normal; 
font-size: 20px; 
margin: 0px; 
} 
.pane p 
{ 
padding: 10px; 
margin: 0; 
background-color: #e4e4e4; 
} 
</style>　　 

下面我們來介紹jquery.accordtion.js插件的實(shí)現(xiàn)。首先我們需要考慮的是如何隱藏pane里面的內(nèi)容部分，也就是p標(biāo)簽。h1作為標(biāo)題是不需要隱藏的。

復(fù)制代碼代碼如下:

 
(function ($) { 
$.fn.accordtion = function () { 
return this.each(function () { 
$(this).find('p').hide(); 
}); 
} 
})(jQuery);　　 

頁面調(diào)用的代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function () { 
　　$('#pane-container').accordtion(); 
}); 

　　插件代碼很簡(jiǎn)單，就是找到class為pane的div下面的p，對(duì)其隱藏。接下來我們要實(shí)現(xiàn)的是，當(dāng)用戶點(diǎn)到h1的時(shí)候，對(duì)應(yīng)的p標(biāo)簽的內(nèi)容顯示出來，同時(shí)其他h1對(duì)應(yīng)的p標(biāo)簽的內(nèi)容隱藏。代碼如下：

復(fù)制代碼代碼如下:

 
//對(duì)h1標(biāo)簽設(shè)置click事件 
self.delegate('h1', 'click', function () { 
　　//為對(duì)應(yīng)的p標(biāo)簽設(shè)置slideToggle效果 
　　$(this).next('p').slideToggle(600) 
　　　　　　//獲取其他pane對(duì)象，找到他們下面的p標(biāo)簽，收起 
　　　　　　.parent().siblings().children('p').slideUp(600); 
}); 

現(xiàn)在我們的插件已經(jīng)很有型了，最后要做的就是添加用戶自定義屬性options，這次我們只添加一個(gè)‘默認(rèn)顯示第幾個(gè)pane'的屬性。

復(fù)制代碼代碼如下:

 
//設(shè)置第幾個(gè)元素顯示 
self.children(':eq(' + options.visibleByDefault + ')')//找到和options.visibleByDefault一致的pane對(duì)象 
　　.children('p') 
　　.show(); 

　　完整的代碼大家還是下demo自己看吧。jQuery.plugin.accordtion

　　謝謝大家的支持，希望本篇文章對(duì)你有幫助。如果對(duì)代碼哪里有不清楚的地方，可以聯(lián)系我。

您可能感興趣的文章: