jQuery入门学习六:可收缩展开的级联菜单
2009-09-09 15:31
337 查看
本文的内容基本来自itcast上的视频教程,所用示例也基本是那上面的例子
如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但有了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护。使用jQuery来实现级联菜单的一般步骤如下:
1.首先使用<ul>和<li>创建一个级联菜单
2.编写JavaScript代码,控制级联菜单的收缩
创建css文件,来控制标签的显示效果
jQuery带来的方便:
在找被点击的菜单时,仅需要一个$(this)就可以实现
节点的显示与隐藏,只用一条语句:toggle()就可以,并且还可以在数组上实现所有节点都具有这种功能。
找到某个标签下所有的某种标签:$("ul > a")
如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但有了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护。使用jQuery来实现级联菜单的一般步骤如下:
1.首先使用<ul>和<li>创建一个级联菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>itcast.cn的JQuery应用示例:弹出菜单</title> <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css" /> <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script> </head> <body> <ul> <a href="#" mce_href="#">我是菜单1</a> <li><a href="#" mce_href="#">我是子菜单1</a></li> <li><a href="#" mce_href="#">我是子菜单2</a></li> </ul> <ul> <a href="#" mce_href="#">我是菜单2</a> <li><a href="#" mce_href="#">我是子菜单3</a></li> <li><a href="#" mce_href="#">我是子菜单4</a></li> </ul> </body> </html>
2.编写JavaScript代码,控制级联菜单的收缩
//需要点击主菜单的按钮时,对应的子菜单可以显示,再次点击子菜单则隐藏 //需要编写代码,在页面装载时,给所有的主菜单添加onclick的事件 //保证主菜单点击时可以显示或隐藏子菜单 //注册页面装载时执行的方法 $(document).ready(function() { //这里需要首先找到所有的主菜单 //然后给所有的主菜单注册点击事件 //找到ul中的节点 var as = $("ul > a"); as.click(function() { //这里需要找到当前ul中的li,然后让li显示出来 //获取当前被点击的a节点 var aNode = $(this); //找到当前a节点的所有li兄弟字节点 var lis = aNode.nextAll("li"); //让子节点显示或隐藏 lis.toggle("show"); }); });
创建css文件,来控制标签的显示效果
/*如何让所有的li都不显示小圆点,可以使用css的标签选择器*/ li { list-style: none; /*使li前面的小圆点消失*/ margin-left: 18px; /*让子菜单向右移动一段距离,达到缩进的效果*/ display: none; /*让所有的子菜单都先隐藏*/ } a{ text-decoration: none; /*让链接的下划线消失*/ }
jQuery带来的方便:
在找被点击的菜单时,仅需要一个$(this)就可以实现
节点的显示与隐藏,只用一条语句:toggle()就可以,并且还可以在数组上实现所有节点都具有这种功能。
找到某个标签下所有的某种标签:$("ul > a")
相关文章推荐
- jQuery入门学习六:可收缩展开的级联菜单
- jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果
- 从零开始学习jQuery (一) 开天辟地入门篇
- Jquery学习入门一
- jQuery 淡入淡出、展开收缩菜单实现代码
- [乐意黎转载]从零开始学习jQuery (一) 开天辟地入门篇
- Jquery 入门学习
- jquery学习第一天:隔行变色、文本框聚焦清空、展示收缩效果
- 【11】jQuery学习——入门jQuery选择器之过滤选择器-表单对象属性过滤选择器
- jQuery点击收缩展开滑动显示内容竖直手风琴代码
- 【8】jQuery学习——入门jQuery选择器之过滤选择器-子元素过滤选择器
- jQuery 语法简单介绍和入门学习
- jQuery表格应用-单选框复选框以及表格展开收缩
- 入门 HTML JavaScript Jquery学习回顾 有小案例
- Jquery div展开收缩
- angular学习之四实例:点击收缩展开下拉
- jquery入门学习
- Jquery入门学习第二篇
- jQuery点击展开收缩垂直菜单代码
- 从零开始学习jQuery (一) 开天辟地入门篇