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

最新推荐文章于 2024-12-23 16:50:22 发布

原创最新推荐文章于 2024-12-23 16:50:22 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #WordPress #JavaScript #XHTML #HTML #ViewUI

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的菜单伸缩效果。通过简单的HTML结构和jQuery代码，可以轻松创建可交互的下拉菜单。该效果允许用户点击菜单项来展开或收起子菜单。

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