開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服
首頁
好書
留言交流
下載APP
聯(lián)系客服
2014.08.07
Html代碼如下：
<div class="box"> <p>菜單一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a></li> </ul> <p>菜單二</p> <ul> <li><a>2222</a></li> <li><a>2222</a></li> <li><a>2222</a></li> </ul> <p>菜單三</p> <ul> <li><a>3333</a></li> <li><a>3333</a></li> <li><a>3333</a></li> </ul></div>
插件實(shí)現(xiàn)代碼如下：
(function ($) { $.fn.Fold = function (options) { //默認(rèn)參數(shù)設(shè)置 var settings = { speed: 300 //折疊速度(值越大越慢) } //不為空則合并參數(shù) if (options) $.extend(settings, options); //為每個(gè)p元素綁定點(diǎn)擊事件 $("> p", this).each(function () { $(this).bind("click", function () { $(this).next("ul").slideToggle(settings.speed); }); }); //默認(rèn)第一個(gè)展開，其它折疊 $("> ul", this).hide().first().show(); //遵循鏈?zhǔn)皆瓌t return this.each(function () { }); }})(jQuery);
這里就不作講解了，注釋都寫明了。
示例DEMO如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul,ul li{ list-style:none;} .box{ width:250px; margin:50px auto; border:1px solid gray;} .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold; line-height: 40px;padding-left: 15px;} </style></head><body> <div class="box"> <p>菜單一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a></li> </ul> <p>菜單二</p> <ul> <li><a>2222</a></li> <li><a>2222</a></li> <li><a>2222</a></li> </ul> <p>菜單三</p> <ul> <li><a>3333</a></li> <li><a>3333</a></li> <li><a>3333</a></li> </ul> </div> <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../js/jquery.similar.Fold.js" type="text/javascript"></script> <script type="text/javascript"> $(".box").Fold(); </script></body></html>
效果圖片：
微信登錄中...請(qǐng)勿關(guān)閉此頁面
<noscript id="cwgq6"></noscript>
