您的位置: 首页  >  IT文章  >  JavaScript+jQuery实现容易的动态菜单

JavaScript+jQuery实现容易的动态菜单

分类: IT文章 • 2024-11-29 20:07:42
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 class="main">
    			<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;
}

 

相关推荐