jQuery特效---菜单伸缩展开收起效果

演示地址：

http://www.iiwnet.com/js_menu/998.html

演示图片：


jquery 方法缩小 jquery展开收缩效果_xhtml


核心代码如下 

<!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' xml:lang='en-us'> 
<head> 
<title>jquery菜单伸缩效果 www.iiwnet.com</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></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> 
<style> 
body { font-family: Arial; font-size: 16px; } 
dl { width: 300px; } 
dl,dd { margin: 0; } 
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; } 
dt a { color: #FFF; } 
dd a { color: #000; } 
ul { list-style: none; padding: 5px; } 
</style> 
</head> 
<body> 
<span style='color:red'>*请再次刷新页面查看效果</span> 
<dl> 
<dt><a href='#'>jQuery</a></dt> 
<dd> 
<ul> 
<li><a href='#'>Download</a></li> 
<li><a href='#'>Documentation</a></li> 
<li><a href='#'>Blog</a></li> 
</ul> 
</dd> 
<dt><a href='#'>Js特效</a></dt> 
<dd> 
<ul> 
<li><a href='http://www.niutw.com'>Mailing List</a></li> 
<li><a href='#'>Tutorials</a></li> 
<li><a href='#'>Demos</a></li> 
<li><a href='#'>Plugins</a></li> 
</ul> 
</dd> 
<dt><a href='#'>Jquery特效</a></dt> 
<dd> 
<ul> 
<li><a href='#'>Source Code</a></li> 
<li><a href='#'>Bug Tracking</a></li> 
<li><a href='#'>Recent Changes</a></li> 
</ul> 
</dd> 
</dl> 
</body> 
</html>

效果还不错