jquery 写的折叠菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>jqurey折叠菜单</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<!-- 折叠菜单开始 -->
<div >
<button id="btn_packinglist">显示列表</button>
</div>
<!-- 列表项 -->
<div class="item">子菜单</div>
<div class="sub_item" >副菜单</div>
<!-- 列表项 -->
<div class="item">子菜单</div>
<div class="sub_item" >副菜单</div>
<!-- 列表项 -->
<div class="item">子菜单</div>
<div class="sub_item" >副菜单</div>
<!-- 列表项 -->
<div class="item">子菜单</div>
<div class="sub_item" >副菜单</div>
<!-- 列表项 -->
<div class="item">子菜单</div>
<div class="sub_item" >副菜单</div>
<style>
.item {
width:250px;height:80px;display:none;background-color:#949494;
}
.sub_item{
width:250px;height:80px;display:none;background-color:#E4E4E4;
}
#btn_packinglist{
width:250px;height:80px;
}
</style>
<script type="text/javascript">
$("#btn_packinglist").click(function(){
$(".item").slideToggle("fast");
$(".sub_item").hide();
});
$(".item").click(function(){
$(this).next().slideToggle("fast");
$(".item").not(this).next().slideUp();
});
</script>
<!-- 折叠菜单结束 -->
</body>
</html>
浙公网安备 33010602011771号