Jquery实现父菜单与子菜单的动态伸张效果(源码)

sungang_1120

浏览: 323665 次
性别:
来自: 成都

最近访客更多访客>>

bxl994

eplang

zhongzunfa

sdyjmc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

细细品味-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:">菜单1</a>
<ul>
<li>
<a href="javascript:">子菜单11</a>
</li>
<li>
<a href="javascript:">子菜单12</a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:">菜单2</a>
<ul>
<li>
<a href="javascript:">子菜单21</a>
</li>
<li>
<a href="javascript:">子菜单22</a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:">菜单3</a>
<ul>
<li>
<a href="javascript:">子菜单31</a>
</li>
<li>
<a href="javascript:">子菜单32</a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:">菜单4</a>
<ul>
<li>
<a href="javascript:">子菜单41</a>
</li>
<li>
<a href="javascript:">子菜单42</a>
</li>
</ul>
</li>
<li class="zhucaidan">
<a href="javascript:">菜单5</a>
<ul>
<li>
<a href="javascript:">子菜单51</a>
</li>
<li>
<a href="javascript:">子菜单52</a>
</li>
</ul>
</li>
</ul>

 
 
 
 
 
<ul>
<li class="hzhucaidan">
<a href="javascript:">菜单1</a>
<ul>
<li>
<a href="javascript:">子菜单11</a>
</li>
<li>
<a href="javascript:x">子菜单12</a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:">菜单2</a>
<ul>
<li>
<a href="javascript:">子菜单21</a>
</li>
<li>
<a href="javascript:">子菜单22</a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:">菜单3</a>
<ul>
<li>
<a href="javascript:">子菜单31</a>
</li>
<li>
<a href="javascript:">子菜单32</a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:">菜单4</a>
<ul>
<li>
<a href="javascript:">子菜单41</a>
</li>
<li>
<a href="javascript:">子菜单42</a>
</li>
</ul>
</li>
<li class="hzhucaidan">
<a href="javascript:">菜单5</a>
<ul>
<li>
<a href="javascript:">子菜单51</a>
</li>
<li>
<a href="javascript:">子菜单52</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')");
}
}
}

查看图片附件

分享到：

JSON 数据格式 | Jquery实现可以编辑的表格(x相应回车后修改 ...

2012-12-20 17:06
浏览 795
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论