展開合攏的jQuery折疊菜單，手風琴面板

2024-09-05 12:20:52

字體：大中小

來源：轉載

供稿：網友

一款大家都常見的折疊菜單，手風琴折疊面板，會展開和合攏，帶點Flash動畫效果，修改時請注意：
　　slideUp : 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。
　　slideDown: 通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>折疊菜單-www.survivalescaperooms.com</title><script src="http://www.survivalescaperooms.com/ajaxjs/jquery1.3.2.js"></script><script>$(document).ready(function(){$("dd:not(:first)").hide(); //隱藏 dd不是第一個的. E:first:相當于E:eq(0) // $("dd:not(:last)").hide();  //試試$("dd:not(:last)").hide();$("dt a").click(function(){$("dd:visible").slideUp("slow");	$(this).parent().next().slideDown("slow");return false;});	});	</script> 	<style>	dl { width: 150px; }	dl,dd { margin: 0; }	dt { background: gray; font-size: 14px; padding: 2px; margin: 2px; }	dt a { color: #FFF; }	dd a { color: #000;font-size: 12px; }	ul { list-style: none; padding: 2px; }	</style></head><body><dl><dt>ASP</dt>	<dd>	<ul>		<li>論壇社區</li>		<li>新聞文章</li>		<li>企業網站</li>	</ul>	</dd><dt>PHP</dt>	<dd>	<ul>		<li>論壇社區</li>		<li>博客主頁</li>	</ul>	</dd><dt>腳本資源</dt>	<dd>	<ul>		<li>AJAX</li>		<li>JQUERY</li>		<li>JAVASCRIPT</li>	</ul>	</dd></dl></body></html>

上一篇：CSS菜單制作教程：黑色縱排菜單

下一篇：下滑菜單CSS+Js，jQuery1.3.2代碼