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

最新推荐文章于 2023-12-27 09:00:00 发布

weixin_34273046

最新推荐文章于 2023-12-27 09:00:00 发布

阅读量379

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/xixios/blog/83469

版权

jQuery特效---菜单伸缩展开收起效果
演示地址： http://www.iiwnet.com/js_menu/998.html
演示图片：

更多： JS特效
核心代码如下

<!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>

效果还不错

转载于:https://my.oschina.net/xixios/blog/83469