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

2019/6/29 22:43:10

编程Tag： jQuery 级联菜单 hidden show

本文主要是介绍jquery 利用show和hidden实现级联菜单示例代码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 
<%@ 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 利用show和hidden实现级联菜单示例代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章