jQuery入门学习六:可收缩展开的级联菜单
来源:互联网 发布:mac 链接无线键盘 编辑:程序博客网 时间:2024/04/28 13:13
本文的内容基本来自itcast上的视频教程,所用示例也基本是那上面的例子
如果用纯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")
0 0
- jQuery入门学习六:可收缩展开的级联菜单
- jQuery入门学习六:可收缩展开的级联菜单
- Jquery实例2:可收缩展开的级联菜单与局部刷新
- 21_实现可收缩和展开的级联菜单
- 《JavaWeb---JQuery实现可收缩的级联菜单》
- jQuery实现淡入淡出的可展开级联菜单
- 可伸缩展开的级联菜单
- jQuery圆形菜单展开收缩特效
- jQuery点击展开收缩垂直菜单代码
- 可展开和收缩的表格
- 封装可展开和收缩的View
- Android 可收缩展开的 TextView
- js实现菜单的收缩与展开
- 很实用的展开/收缩菜单
- jQuery 淡入淡出、展开收缩菜单实现代码
- JQuery的一种特效:展开和收缩
- Jquery实现的文本展开和收缩
- jQuery实现图片的展开和收缩
- java自带线程池和队列详细讲解
- java中Thread与Runnable的区别
- 用php实现引用cacti中的流量图表
- 磨刀不误砍材工 - 环境搭建(为什么要配置环境变量)
- Hadoop HDFS数据完整性
- jQuery入门学习六:可收缩展开的级联菜单
- Floyd算法——C语言实现
- Robotium第一篇之心里闹腾
- html5 range
- NDK环境下输出Android Log
- android 打包签名
- 转载 IOS工程适配64-BIT 经验分享
- 大型文件在两台计算机间的多线程传输
- 小米盒子1s真心不让我爽