本文實例講述了JQuery實現簡單的折疊菜單效果代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
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>
插件實現代碼如下：
(function ($) { $.fn.Fold = function (options) { //默認參數設置 var settings = { speed: 300 //折疊速度(值越大越慢) } //不為空則合并參數 if (options) $.extend(settings, options); //遵循鏈式原則 return this.each(function () { //為每個p元素綁定點擊事件 $("> p", this).each(function () { $(this).bind("click", function () { $(this).next("ul").slideToggle(settings.speed); }); }); //默認第一個展開，其它折疊 $("> ul", this).hide().first().show(); }); }})(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>希望本文所述對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
