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 相关文章推荐
读jQuery之五(取DOM元素)
Jun 20 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
网络传输协议(http协议)
Nov 18 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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
php checkbox 取值详细说明
2010/08/19 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
vue 组件简介
2020/07/31 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
GWT都有什么特性
2016/12/02 面试题
J2EE面试题大全
2016/08/06 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
个人借款担保书
2014/04/02 职场文书
大学新生军训方案
2014/05/03 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
2014年国庆节寄语
2014/09/19 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python入门之基础语法详解
2021/05/11 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
python使用BeautifulSoup 解析HTML
2022/04/24 Python