首页 > 代码库 > 基于jQuery制作的手风琴折叠菜单
基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏
点第一个，显示第一个所隐藏的内容
当点第二个的时候，第一个的内容隐藏，第二个栏目的内容显示，以此类推
下面是代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/22px "Microsoft YaHei", arial, serif;
}
a, a:link, a:visited {
color: #ccc;
text-decoration: none;
}
.content {
margin: 50px auto;
width: 220px;
height: auto;
}
.content > ul {
list-style: none;
}
.content .menu-one > li {
width: 220px;
height: auto;
overflow: hidden;
border-top: 1px solid #888;
}
.content .menu-one > li.firstChild {
border: 0;
}
.content .menu-one .header {
height: 35px;
background: #666;
line-height: 34px;
text-indent: 15px;
cursor: pointer;
}
.content .menu-one .header:hover, .content .menu-one .menuOne-current {
background: #777;
}
.content .menu-one .header > span {
display: block;
}
.content .menu-one .header .txt {
float: left;
color: #fff;
}
.content .menu-one .header .arrow {
float: right;
width: 35px;
height: 35px;
background: url(arrow-d.png) no-repeat center center;
}
.content .menu-two {
display: none;
width: 220px;
height: auto;
}
.content .menu-two li {
width: 220px;
height: 35px;
background: #eee;
border-top: 1px solid #ccc;
line-height: 34px;
text-indent: 40px;
}
.content .menu-two li.firstChild {
border: 0;
}
.content .menu-two li a {
display: block;
color: #888;
}
.content .menu-two li:hover, .content .menu-two li.menuTwo-current {
background: #fff;
}
.content .menu-show .header {
background: #777;
}
.content .menu-show .header .arrow {
background-image: url(arrow-u.png);
}
</style>
<script src="http://www.mamicode.com/js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<ul class="menu-one">
<li class="firstChild">
<div class="header"><span class="txt">一、HTML5基础教程</span> <span class="arrow"></span></div>
<ul class="menu-two">
<li class="firstChild"><a href="http://www.mamicode.com/#">HTML5基础教程01</a></li>
<li><a href="http://www.mamicode.com/#">HTML5基础教程02</a></li>
<li><a href="http://www.mamicode.com/#">HTML5基础教程03</a></li>
<li><a href="http://www.mamicode.com/#">HTML5基础教程04</a></li>
</ul>
</li>
<li>
<div class="header"><span class="txt">二、CSS3基础教程</span> <span class="arrow"></span></div>
<ul class="menu-two">
<li class="firstChild"><a href="http://www.mamicode.com/#">CSS3基础教程01</a></li>
<li><a href="http://www.mamicode.com/#">CSS3基础教程02</a></li>
<li><a href="http://www.mamicode.com/#">CSS3基础教程03</a></li>
<li><a href="http://www.mamicode.com/#">CSS3基础教程04</a></li>
</ul>
</li>
<li>
<div class="header"><span class="txt">三、JavaScript基础教程</span> <span class="arrow"></span></div>
<ul class="menu-two">
<li class="firstChild"><a href="http://www.mamicode.com/#">JavaScript基础教程01</a></li>
<li><a href="http://www.mamicode.com/#">JavaScript基础教程02</a></li>
<li><a href="http://www.mamicode.com/#">JavaScript基础教程03</a></li>
<li><a href="http://www.mamicode.com/#">JavaScript基础教程04</a></li>
</ul>
</li>
<li>
<div class="header"><span class="txt">四、PHP基础教程</span> <span class="arrow"></span></div>
<ul class="menu-two">
<li class="firstChild"><a href="http://www.mamicode.com/#">PHP基础教程01</a></li>
<li><a href="http://www.mamicode.com/#">PHP基础教程02</a></li>
<li><a href="http://www.mamicode.com/#">PHP基础教程03</a></li>
<li><a href="http://www.mamicode.com/#">PHP基础教程04</a></li>
</ul>
</li>
<li>
<div class="header"><span class="txt">五、IOS基础教程</span> <span class="arrow"></span></div>
<ul class="menu-two">
<li class="firstChild"><a href="http://www.mamicode.com/#">IOS基础教程01</a></li>
<li><a href="http://www.mamicode.com/#">IOS基础教程02</a></li>
<li><a href="http://www.mamicode.com/#">IOS基础教程03</a></li>
<li><a href="http://www.mamicode.com/#">IOS基础教程04</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
var aMenuOneLi = $(".menu-one > li");
var aMenuTwo = $(".menu-two");
$(".menu-one > li > .header").each(function (i) {
$(this).click(function(){
if ($(aMenuTwo[i]).css("display") == "block") {
$(aMenuTwo[i]).slideUp(300);
$(aMenuOneLi[i]).removeClass("menu-show")
}else{
for (var j = 0; j < aMenuTwo.length; j++) {
$(aMenuTwo[j]).slideUp(300);
$(aMenuOneLi[j]).removeClass("menu-show");
}
$(aMenuTwo[i]).slideDown(300);
$(aMenuOneLi[i]).addClass("menu-show")
}
});
});
});
</script>
</body>
</html>
第二种方法（ps:跟第一个相比第二个比较简陋，但也是能用的）
<ul>
<li class="">
<a href="javascript:;">
<img src="http://www.mamicode.com/images/p6-1.png" ><span>我的资料</span>
</a>
<ul>
<li>
<a href="http://www.mamicode.com/wodeziliao.html">
<span>我的资料</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;">
<img src="http://www.mamicode.com/images/p6-2.png" ><span>我的发布</span>
</a>
<ul>
<li><a href="http://www.mamicode.com/wodefabu.html"><span>我的发布</span></a></li>
<li><a href="http://www.mamicode.com/wodefabu.html"><span>我的发布</span></a></li>
<li><a href="http://www.mamicode.com/wodefabu.html"><span>我的发布</span></a></li>
<li><a href="http://www.mamicode.com/wodefabu.html"><span>我的发布</span></a></li>
</ul>
</li>
<li class="">
<a href="javascript:;">
<img src="http://www.mamicode.com/images/p6-3.png" ><span>我的收藏</span>
</a>
<ul>
<li><a href="http://www.mamicode.com/wodeshoucang.html"><span>我的收藏</span></a></li>
<li><a href="http://www.mamicode.com/wodeshoucang.html"><span>我的收藏</span></a></li>
<li><a href="http://www.mamicode.com/wodeshoucang.html"><span>我的收藏</span></a></li>
<li><a href="http://www.mamicode.com/wodeshoucang.html"><span>我的收藏</span></a></li>
</ul>
</li>
<li class="">
<a href="javascript:;">
<img src="http://www.mamicode.com/images/p6-4.png" ><span>我的预约</span>
</a>
<ul>
<li><a href=""><span>我的预约</span></a></li>
<li><a href=""><span>我的预约</span></a></li>
<li><a href=""><span>我的预约</span></a></li>
<li><a href=""><span>我的预约</span></a></li>
</ul>
</li>
<li class="">
<a href="javascript:;">
<img src="http://www.mamicode.com/images/p6-5.png" ><span>我的订单</span>
</a>
<ul>
<li><a href=""><span>我的订单</span></a></li>
<li><a href=""><span>我的订单</span></a></li>
<li><a href=""><span>我的订单</span></a></li>
<li><a href=""><span>我的订单</span></a></li>
</ul>
</li>
<li class="">
<a href="http://www.mamicode.com/xiugaimima.html">
<img src="http://www.mamicode.com/images/p6-6.png" ><span>修改密码</span>
</a>
</li>
<li class="">
<a href="">
<img src="http://www.mamicode.com/images/p6-7.png" ><span>退出账号</span>
</a>
</li>
</ul>
$(".Ep_my_data li").click(function(){
$(this).toggleClass("ssde");
$(this).children(".Ep_my_data li ul").slideToggle("slow");
});
基于jQuery制作的手风琴折叠菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。