知识要点：
- 对ul>li灵活运用
- children() //获取子元素
- siblings() //反选（重点）
- slideUp() slideDown() 滑动动画
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-折叠菜单</title>
<script src="js/jquery-1.6.4/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 300px;
margin: 100px auto;
overflow: hidden;
}
.nav > li {
border: 1px solid #000;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
position: relative;
}
.nav > li:last-child {
border-bottom: 1px solid #000;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.nav > li:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.nav > li img {
width: 10px;
position: absolute;
top: 8px;
right: 20px;
}
.nav > li > ul {
list-style: none;
background: #8018ff;
}
.nav > li > ul > li {
border-bottom: 1px solid white;
}
.content {
display: none;
}
.content > li:hover {
background: #7086ff;
}
.rightarrow {
transform: rotate(90deg);
transition-duration: 0.5s;
}
</style>
<script>
$(function () {
//获取一级菜单点击事件
$(".nav>li").click(function () {
//获取当前一级菜单对应的二级菜单。显示
var $oliLists = $(this).children(".one-li>ul");
$($oliLists).slideDown(1000)
//这里要注意细节，当选择打开当前子级菜单的时候，其它打开的子级菜单应收起来,使用siblings反选
var $visiblelis = $(this).siblings().children(".one-li>ul");
$($visiblelis).slideUp(1000)
//获取当前箭头，设置旋转90
$(this).children("img").addClass("rightarrow");
//反选
$(this).siblings().children("img").removeClass("rightarrow");
});
})
</script>
</head>
<body>
<ul class="nav">
<li class="one-li">一级菜单
<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">二级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">三级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">四级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">五级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">六级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">七级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
<li class="one-li">八级菜单<img src="../images/img_jr2.png" alt="">
<ul class="content">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
</li>
</ul>
</body>
</html>
效果图：
yhx.gif
网友评论