编程 Javascript

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 相关文章推荐

正则表达式语法

Oct 09 Javascript

struts2 jquery 打造无限层次的树

Oct 23 Javascript

JS等比例缩小图片尺寸的实例

Feb 27 Javascript

鼠标移到导航当前位置的LI变色处于选中状态

Aug 23 Javascript

正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)

Nov 26 Javascript

javascript 数组操作详解

Jan 29 Javascript

ECMAScript6函数剩余参数（Rest Parameters）

Jun 12 Javascript

详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

Sep 14 Javascript

JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

Nov 01 Javascript

javascript实现一个网页加载进度loading

Jan 04 Javascript

用Node提供静态文件服务的方法

Jul 06 Javascript

在antd中setFieldsValue和defaultVal的用法

Oct 29 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