《JavaWeb---JQuery实现可收缩的级联菜单》

最新推荐文章于 2022-10-03 20:22:19 发布

IT痴者

最新推荐文章于 2022-10-03 20:22:19 发布

阅读量2.8k

点赞数

分类专栏： ajax Java Web 文章标签： stylesheet javascript function jquery

本文链接：https://blog.csdn.net/w695050167/article/details/8040898

版权

Java Web 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>可收缩的菜单</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/menu.js"></script>
	<link rel="stylesheet" type="text/css" href="css/menu.css">
  </head>
  
  <body>
    <ul><a href="javascript:void(0)">主菜单1</a>
    	<li>子菜单</li>
    	<li>子菜单</li>
    	<li>子菜单</li>
    </ul>
    <ul><a href="javascript:void(0)">主菜单2</a>
    	<li>子菜单</li>
    	<li>子菜单</li>
    	<li>子菜单</li>
    </ul>
  </body>
</html>

CSS代码

li{
	list-style: none;
	margin-left: 18px;
	display: none;
	}
<!--去掉a标签默认的超链接样式-->
a:link { 
	text-decoration:none; 
	} 
a:visited { 
	color: #0066CC;
	text-decoration:none; 
} 
a:active {
	color: #0066CC; 
	text-decoration:none; 
	}

JS代码

//利用JQuery，当页面加载时注册执行的函数
$(document).ready(function(){
	
	//给a标签注册点击事件
	$("a").click( function () {
		//获取与a标签等级的所有li标签
		var lis = $(this).nextAll("li"); 
		
		//切换li标签的显示样式
		lis.toggle("slow");
		});
});