<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery3-菜单效果</title>
<link type="text/css" rel="stylesheet" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
<br />
<br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
</html>
js代码
$(function() {
$(".main > a").click(function() {
//找到主菜单项对应的子菜单项
//next:寻找当前节点指定名称的兄弟节点。
var ulNode = $(this).next("ul");
/* if (ulNode.css("display") == "none") {
ulNode.css("display", "block");
} else {
ulNode.css("display", "none");
}*/
//ulNode.show();
//ulNode.hide();
//自动判断，如果是合并的就打开，如果是打开的就合并
//ulNode.toggle();
//卷帘效果
//ulNode.slideDown();
//ulNode.slideUp();
//卷帘效果的自动判断
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function() {
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
}, function() {
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
//指示图标的展打开和关闭
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("closed.gif") >= 0) {
mainNode.css("background-image", "url(image/open.gif)");
} else {
mainNode.css("background-image", "url(image/closed.gif)");
}
}
}
ul, li {
/*清楚ul li上默认的小圆点*/
list-style: none;
}
ul {
/*清除缩进*/
padding: 0;
margin: 0;
}
.main,.hmain{
background-image: url("../image/title.jpg");
background-repeat: repeat-x;
width: 120px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
/*充满所在区域*/
display: block;
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a,.hmain a{
color: white;
background-image: url("../image/closed.gif");
background-repeat: no-repeat;
background-position: 5px center;
}
.main li a, .hmain li a{
color: black;
background-image: none;
}
/*将所有子菜单隐藏*/
.main ul,.hmain ul{
display:none;
}
.hmain{
float:left;
margin-left:1px;
}