<%@ 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;
}