一行代码搞定缓冲效果伸缩菜单(附后台管理页面运用例子)

JQuery菜单

最新推荐文章于 2024-02-06 17:25:34 发布

最新推荐文章于 2024-02-06 17:25:34 发布 · 195 阅读

文章标签：

#jQuery #CSS #JavaScript #HTML #ViewUI

本文介绍了一个使用JQuery实现的可扩展菜单。通过简单的JS函数和HTML结构，实现了菜单项及其子菜单的滑动展开和收起功能。只需在HTML中添加相应的菜单项即可轻松扩展。

最近研究了一下JQuery, 读了一下api,发现了强大的JQuery....

所以把之前的伸缩菜单重写了一遍.

menu.js文件:

function toggle(obj){
       $(obj).next().slideToggle("slow"); 
}

html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/menu.js"></script>
		<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
	    <link href="css/menu.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="menu">
			<ul>
				<li onClick="toggle(this)">菜单选项一</li>
				<li>
					<ul>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
					</ul>
				</li>
				
				<li onClick="toggle(this)">菜单选项二</li>
				<li>
					<ul>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
					</ul>
				</li>
				
				<li onClick="toggle(this)">菜单选项三</li>
				<li>
					<ul>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
						<li>子菜单一</li>
					</ul>
				</li>				
				
			</ul>
		</div>
	</body>
</html>

增加一个菜单只需要在ul里面加:

<li onClick="toggle(this)">菜单选项三</li>
<li>
<ul>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
<li>子菜单一</li>
</ul>
</li>

就行.

最后运用效果可以参看附件.