浏览 11958 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-05
最近研究了一下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> 就行.
最后运用效果可以参看附件. 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-02-05
效果是出来了
可是说实话卡得很,不咋地 |
| 返回顶楼 | |
|
发表时间：2009-02-05
说实话，写的不好，不如dtree，除了花哨点，还有好像速度也不快
|
| 返回顶楼 | |
|
发表时间：2010-01-15
最后修改：2010-01-15
这个有点不好，页面初始化二级菜单不是隐藏的。
|
| 返回顶楼 | |
