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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php表单处理操作
2017/11/16 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
Node.js文件操作详解
2014/08/16 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
自我评价中英文语句
2013/11/30 职场文书
小学生暑假家长评语
2014/04/17 职场文书
捐书活动总结
2014/05/04 职场文书
篮球社团活动总结
2014/06/27 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL