jquery 利用show和hidden实现级联菜单示例代码


Posted in Javascript onAugust 09, 2013
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jqueryMenu</title> 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var allMenu=$("ul > a");//找到所有主菜单 
allMenu.click(function(){ 
var list=$(this).nextAll('li');//找到当前被点击a节点的所有li兄弟节点 
list.toggle('show'); 
}); 
}); 
</script> 
</head> 
<body> 
<ul><a href="#">菜单一</a> 
<li><a href="#">子菜单一</a></li> 
<li><a href="#">子菜单二</a></li> 
</ul> 
<ul><a href="#">菜单二</a> 
<li><a href="#">子菜单一</a></li> 
<li><a href="#">子菜单二</a></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
jQuery :first选择器使用介绍
Aug 09 #Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 #Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 #Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 #Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 #Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 #Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
You might like
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP反向代理类代码
2014/08/15 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现读取json文件到excel表
2017/11/18 Python
python绘制直线的方法
2018/06/30 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
办公室秘书自我鉴定
2014/01/18 职场文书
岗位职责风险点
2014/03/12 职场文书
申论倡议书范文
2014/05/13 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS