jquery 利用show和hidden实现级联菜单示例代码 - Web前端
作者：98wpeu发布时间：2026-06-17分类：网页前端技术浏览：7
导读：复制代码代码如下:<%@pagelanguage="java"contenttype="text/html;charset=UTF-8"pageEncoding=...
复制代码 代码如下:
<%@ 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>
<metaHTTP-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>
<%@ 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>
<metaHTTP-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点击弹出下拉菜单的小例子 - Web前端
- jQuery实现密保互斥问题解决方案 - Web前端
- jquery 获取表单元素里面的值示例代码 - Web前端
- jQuery之ajax技术的详细介绍 - Web前端
- jquery 文本上下无缝滚动,鼠标放上去就停止 小例子 - Web前端
- jQuery之ajax技术的详细介绍 - Web前端
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能 - Web前端
- jquery中常用的SET和GET$(”#msg”).html循环介绍 - Web前端
- 解析jQuery与其它js(Prototype)库兼容共存 - Web前端
- 用Jquery重写windows.alert方法实现思路 - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性