jquery实现动态菜单的实例代码


Posted in Javascript onNovember 28, 2013

jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式。

其具体步骤可以分为以下几步:

•创建一个含有要表达的菜单的html页面

<html>
  <head>
    <title>jquery示例2:jquery菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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>我是子菜单1</li>
        <li>我是子菜单2</li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜单2</a>
        <li>我是子菜单3</li>
        <li>我是子菜单4</li>
    </ul>
    <div id="content"></div>
  </body>
</html>

•创建一个css文件来控制菜单的显示
/*让所有的li都不显示小圆点,可以使用css标签选择器*/
li{
    /*使list前的小圆点消失*/
    list-style: none;
    /*缩进效果*/
    margin-left: 18px;
    /*隐藏菜单*/
    display: none;
}
a{
    /*文字的显示方式*/
    text-decoration: none;
}

•创建一个JavaScript文件来控制菜单的显示
/* 
 * 点击主菜单,子菜单显示;再次点击主菜单,子菜单隐藏
 * 需要编写代码,使得主菜单在装载时添加onclick事件,使得点击主菜单可以显示子菜单
 * 注册页面装载时执行的方法
 */
$(document).ready(function(){
   //var uls = $("ul");
   //找到ul下的a节点
   var as = $("ul > a");
   as.click(function(){
       //首先找到当前ul中的li,然后让li显示出来
       //获取当前被点击的ul节点
       var aNode = $(this);
       //找到被点击ul节点下的所有li节点
       var lis = aNode.nextAll("li");
       //显示或隐藏ul的li子节点们
       lis.toggle("slow");
   });
});
Javascript 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vue环形进度条组件实例应用
Oct 10 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 #Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 #Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 #Javascript
使用js写的一个简易的投票
Nov 27 #Javascript
juery框架写的弹窗效果适合新手
Nov 27 #Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 #Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python图像处理之反色实现方法
2015/05/30 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python学习 流程控制语句详解
2016/06/01 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
《开国大典》教学反思
2014/04/19 职场文书
农业生产宣传标语
2014/10/08 职场文书
个人批评与自我批评
2014/10/15 职场文书
秦兵马俑导游词
2015/02/02 职场文书
中标通知书格式
2015/04/17 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js