手風琴方式展開和摺疊導航菜單效果:本章節分享一段代碼實例，它實現了手風琴方式展開和摺疊導航菜單效果。代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://ww
手風琴方式展開和摺疊導航菜單效果:
本章節分享一段代碼實例，它實現了手風琴方式展開和摺疊導航菜單效果。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> dl{width:150px;} dl,dd{margin:0;} dt{ background:gray; font-size:14px; padding:2px; margin:2px; } dt{color:#FFF;} dd a{ color:#000; font-size:12px; } ul{ list-style:none; padding:2px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("dd:not(:first)").hide(); $("dt a").click(function(){ $("dd:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }); }); </script> </head> <body> <dl> <dt><a href="#">螞蟻部落一</a></dt> <dd> <ul> <li><a href="#">div教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">jquery教程</a></li> </ul> </dd> <dt><a href="#">螞蟻部落二</a></dt> <dd> <ul> <li><a href="#">正則教程</a></li> <li><a href="#">螞蟻部落</a></li> </ul> </dd> <dt><a href="#">螞蟻部落三</a></dt> <dd> <ul> <li><a href="#">ajax教程</a></li> <li><a href="#">softwhy.com</a></li> <li><a href="#">js教程</a></li> </ul> </dd> </dl> </body> </html>
上面的代碼實現了我們的要求，下麵介紹一下它的實現過程。
一.代碼註釋:
（1）.$(document).ready(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
（2）.$("dd:not(:first)").hide()，除第一個dd元素之外的所有dd元素隱藏，就是第一個導航菜單的子菜單是展開的，其他隱藏。
（3）.$("dt a").click(function(){})，為dt元素下的a元素註冊click事件處理函數。
（4）.$("dd:visible").slideUp("slow")，所有已經顯示的dd元素通過動畫方式收縮隱藏。
（5）.$(this).parent().next().slideDown("slow")，當前連接a元素的父元素也就是dt元素，dt元素的下一個元素就是二級菜單dd元素，將此菜單以動畫方式展開。
（6）.return false，這個很重要，防止鏈接的跳轉動作。
二.相關閱讀:
（1）.:not可以參閱jQuery的:not選擇器一章節。
（2）.:first可以參閱jQuery的:first選擇器一章節。
（3）.:visible可以參閱jQuery的:visible選擇器一章節。
（4）.slideUp()可以參閱jQuery的slideUp()方法一章節。
（5）.parent()可以參閱jQuery的parent()方法一章節。
（6）.next()可以參閱jQuery的next()方法一章節。
（7）.return false可以參閱鏈接中return false的作用是什麼一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18316
更多內容可以參閱:http://www.softwhy.com/jquery/
