展开合拢的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.vevb.com</title><script src="http://www.vevb.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代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注