用jquery写一个简单的菜单伸缩效果

最新推荐文章于 2023-01-06 14:09:35 发布

goby2008

最新推荐文章于 2023-01-06 14:09:35 发布

阅读量98

点赞数

分类专栏： jquery 文章标签： jQuery WordPress JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/goby2008/article/details/83671731

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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写一个菜单伸缩效果</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>
jQuery(document).ready(function(){
	jQuery("dd:not(:first)").hide();
		jQuery("dt a").click(function(){
		jQuery("dd:visible").slideUp("slow");
		jQuery(this).parent().next().slideDown("slow");
		return false;
	});
});
</script>
<style>
body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; }
dl,dt,dd,ul {margin: 0; padding: 0;}
dl{margin-top: 150px;}
dt { margin-top: 2px;}
dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px;  padding-left: 5px; color: #FFF; background: #73C5E5;}
dd {width: 303px; border: 1px solid #73C5E5;}
ul li{list-style: none; padding: 5px; text-align: left; }
</style>
</head>
<body>
<dl>
	<dt><a href="http://leotheme.cn/">jQuery</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Download</a></li>
			<li><a href="http://leotheme.cn/">Documentation</a></li>
			<li><a href="http://leotheme.cn/">Blog</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn//discuss/">JavaScript</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Mailing List</a></li>
			<li><a href="http://leotheme.cn/">Tutorials</a></li>
			<li><a href="http://leotheme.cn/">Demos</a></li>
			<li><a href="http://leotheme.cn/">Plugins</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn/">WordPress</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">Themes</a></li>
			<li><a href="http://leotheme.cn/">plugins</a></li>
			<li><a href="http://leotheme.cn/">languages</a></li>
		</ul>
	</dd>
	<dt><a href="http://leotheme.cn/">Themes</a></dt>
	<dd>
		<ul>
			<li><a href="http://leotheme.cn/">BlueSky</a></li>
			<li><a href="http://leotheme.cn/">Maxthon v2.0</a></li>
			<li><a href="http://leotheme.cn/">simple-line</a></li>
		</ul>
	</dd>
</dl>
</body>
</html>

goby2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jquery写一个简单的菜单伸缩效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"&gt;&amp
复制链接

扫一扫