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

2019-12-24,,,,,

复制代码 代码如下:
<%@ 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>

您可能感兴趣的文章:

  • 基于jquery的二级联动菜单实现代码
  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
  • jquery 无限级联菜单案例分享
  • jquery 实现二级/三级/多级联动菜单的思路及代码
  • jQuery实现可收缩展开的级联菜单实例代码
  • 利用了jquery的ajax实现二级联互动菜单
  • jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
  • jQuery实现级联菜单效果(仿淘宝首页菜单动画)
  • jQuery+ajax实现无刷新级联菜单示例
  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解
  • jquery无限级联下拉菜单简单实例演示

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

下载本文的Word格式文档,以方便收藏与打印。