你的位置:首页 > Java教程

[Java教程]JavaScript+jQuery实现简单的动态菜单


1.jQuery:(使用时我们需要导入Jquery文件)

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

2.下面是我们的代码实现

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>	<meta http-equiv="pragma" content="no-cache">	<meta http-equiv="cache-control" content="no-cache">	<meta http-equiv="expires" content="0">  	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">	<meta http-equiv="description" content="This is my page">	<!-- 导入css样式 -->	<link rel="stylesheet" type="text/css" href="css/Annm.css">	<!-- 导入jQuery文件 -->	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>	<script type="text/javascript">		//jQuery方法		$(document).ready(function(){			//获取主菜单:公告管理。声明一个单击函数			$(".main > a").click(function(){				//获取主菜单下面的子菜单ul				var ulObject=$(this).next("ul");				//slideToggle通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。				ulObject.slideToggle();				//调用使三角形变化的函数这里$(".main>a")也可以换成this即demo(this).				demo($(".main > a"));			});		});		function demo(mNode){			//判断是否是根节点			if(mNode){				if(mNode.css("background-image").indexOf("collapsed.gif")>=0){					//索引值大于等于0变换图片背景					mNode.css("background-image","url('image/images2/expanded.gif')");				}else{					mNode.css("background-image","url('image/images2/collapsed.gif')");				}			}		}	</script>				 </head>  <body>  	<ul>  		<li >  			<a href="#">公告管理</a>  			<ul>  				<li><a href="#">增加</a></li>  				<li><a href="#">删除</a></li>  				<li><a href="#">修改</a></li>  				<li><a href="#">查询</a></li>  			</ul>  		</li>  	</ul> </body></html>

 3.css样式

body{	padding: 0px;	margin: 0px;}ul li{	list-style: none;}/*消除缩进*/ul{	padding: 0px;	margin: 0px;}/*给主菜单添加背景图片*/.main{	background-image: url("../image/images2/title.gif");	background-repeat: repeat-x;	width: 120px;}li{	background-color: #eeeeee;}a{	text-decoration: none;	padding-left: 20px;	display: inline-block;	width: 100px;	padding-top: 5px;	padding-bottom: 3px;}/*设置主菜单*/.main a{	color: white;	background-image: url("../image/images2/collapsed.gif");	background-repeat: no-repeat;	background-position: 3px center;}/*设置子菜单*/.main li a{	color: black;	background-image: none;}/*隐藏子菜单*/.main ul{	display: none;}