`
kingkit
  • 浏览: 38826 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

jQueryCSSJavaScriptHTML
阅读更多

最近研究了一下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>

就行.

 

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

分享到：
评论
3 楼 X900 2010-01-15  
这个有点不好，页面初始化二级菜单不是隐藏的。
2 楼 25262875 2009-02-05  
说实话，写的不好，不如dtree，除了花哨点，还有好像速度也不快
1 楼 southgate 2009-02-05  
效果是出来了
可是说实话卡得很,不咋地
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics