jQuery实现可收缩展开的级联菜单实例代码


Posted in Javascript onNovember 27, 2013

如果用纯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带来的方便:

1.在找被点击的菜单时,仅需要一个$(this)就可以实现

2.节点的显示与隐藏,只用一条语句:toggle()就可以,并且还可以在数组上实现所有节点都具有这种功能。

3.找到某个标签下所有的某种标签:$("ul > a")

Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
js获取json元素数量的方法
Jan 27 Javascript
详解javascript遍历方式
Nov 11 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 #Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 #Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 #Javascript
js替代copy(示例代码)
Nov 27 #Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 #Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 #Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python 解析XML文件
2009/04/15 Python
python中from module import * 的一个坑
2014/07/20 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python多维数组分位数的求取方式
2020/03/03 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
Python类型转换的魔术方法详解
2020/12/23 Python
工程班组长岗位职责
2013/12/30 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
博士论文答辩开场白
2015/06/01 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书