Jquery实现父菜单 与 子菜单的动态伸张效果(源码)
Jquery实现父菜单 与 子菜单的动态伸张效果
一、 jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
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 'test_Jquery01 .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">
<link rel="stylesheet" type="text/css" href="css/test_jquery.css">
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<script type="text/javascript" src="js/test_jquery02.js">
</script>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li class="zhucaidan">
<a href="javascript:"><b>菜单1</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单11</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单12</b></a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:"><b>菜单2</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单21</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单22</b></a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:"><b>菜单3</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单31</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单32</b></a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:"><b>菜单4</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单41</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单42</b></a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:"><b>菜单5</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单51</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单52</b></a>
</li>
</ul>
</li>
</ul>
<p></p>
<br />
<br />
<br />
<br />
<br />
<ul>
<li class="hzhucaidan">
<a href="javascript:"><b>菜单1</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单11</b></a>
</li>
<li>
<a href="javascript:x"><b>子菜单12</b></a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:"><b>菜单2</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单21</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单22</b></a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:"><b>菜单3</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单31</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单32</b></a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:"><b>菜单4</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单41</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单42</b></a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:"><b>菜单5</b></a>
<ul>
<li>
<a href="javascript:"><b>子菜单51</b></a>
</li>
<li>
<a href="javascript:"><b>子菜单52</b></a>
</li>
</ul>
</li>
</ul>
</body>
</html>
二、 css代码：
ul,li{
/*去掉ul li 的前面的圆点*/
list-style: none;
}
ul{
/*去掉ul 的缩进*/
padding: 0px;
margin: 0px;
}
.zhucaidan{
/*给主菜单添加背景色*/
background-image:url("../images/2.jpg");
/*去除上下的*/
background-repeat: repeat-x;
/*控制背景色的长度*/
width: 120px;
}
li{
/*把所有li的背景色改为灰色*/
background-color: gray;
}
a{
/*取消所有连接的下划线*/
text-decoration: none;
color: black;
/*缩进20像素*/
padding: 20px;
/*充满所在区域 块元素*/
/*display: block;
display: inline-table;
width: 120px;*/
padding-top: 3px;
padding-bottom: 3px;
}
.zhucaidan a{
/*把所有主菜单的字体颜色都变成白色*/
color: white;
/*给主菜单前面加一个小图片*/
background-image: url("../images/1.jpg");
background-repeat: no-repeat;
background-position: 3px center;
}
.zhucaidan li a{
/*把主菜单下面的li下面连接的字体改为黑色*/
color: black;
/*不让子菜单显示任何图片*/
background-image: none;
}
.zhucaidan ul{
/*隐藏所有的子菜单*/
display: none;
}
.hzhucaidan{
float: left;
}
.hzhucaidan{
/*给主菜单添加背景色*/
background-image:url("../images/2.jpg");
/*去除上下的*/
background-repeat: repeat-x;
/*控制背景色的长度*/
width: 120px;
}
.hzhucaidan a{
/*把所有主菜单的字体颜色都变成白色*/
color: white;
/*给主菜单前面加一个小图片*/
background-image: url("../images/1.jpg");
background-repeat: no-repeat;
background-position: 3px center;
}
.hzhucaidan li a{
/*把主菜单下面的li下面连接的字体改为黑色*/
color: black;
/*不让子菜单显示任何图片*/
background-image: none;
}
.hzhucaidan ul{
/*隐藏所有的子菜单*/
display: none;
}
三、 js代码：
$(document).ready(function() {
//选择类下面的子a 用>
$(".zhucaidan > a").click(function(){
//找到主菜单对应的子菜单
var node = $(this).next("ul");
//if(node.css("display") == "none"){
//显示出来
//node.css("display","block");
//}else{
//隐藏起来
//node.css("display","none");
//}*/
//第二种
if(node.css("display") == "none"){
node.show();
changes(node);
}else{
node.hide();
changes(node);
}
//第三种 会自动判断是显示 还是隐藏着
//node.toggle();
//第四种
//node.sildeDown();
//node.sildeUp();
//第五种
//node.sildeToggle();
});
$(".hzhucaidan > a").click(function(){
var node2 = $(this).next("ul");
if(node2.css("display") == "none"){
node2.show();
changes(node2);
}else{
node2.hide();
changes(node2);
}
});
});
//点击下拉出现时 前面的小图标会默认的改变
function changes(mailNode){
if(mailNode){
if(mailNode.css("background-image").indexOf("images/1.jpg")){
mailNode.css("background-image","url('images/2.jpg')");
}else{
mailNode.css("background-image","url('images/1.jpg')");
}
}
}