<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左侧二级菜单</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
.navBox{
float: right;
}
ul{
display: none;
width: 200px;
border: 1px solid #CCCCCC;
cursor: pointer;
}
ul li{
font-size: 14px;
width: 200px;
text-align: center;
line-height: 25px;
}
ul li:hover{
background: #52baff;
color: #fff;
}
.myDiv{
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #4c4c4c;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
.myDiv:hover{
color: #52baff;
}
.check{
width: 40px;
min-height: 50px;
display: table-cell;
text-align: center;
}
.check input[name="check"]{
display: table-cell;
}
.detailWrap{
min-width: 100px;
float: left;
}
</style>
</head>
<body>
<div class="detailWrap">
<div class="check">
<input type="checkbox" name="check">
</div>
<div class="navBox">
<div class="myDiv">我是一级头部</div>
<ul style="display: block;">
<li>头内容</li>
<li>子内容</li>
<li>一级子菜单三</li>
</ul>
<div class="myDiv">我是二级</div>
<ul>
<li>二级子菜单一</li>
<li>二级子菜单二</li>
<li>二级子菜单三</li>
</ul>
<div class="myDiv">我是三级</div>
<ul>
<li>三层一</li>
<li>三层二</li>
<li>三层三</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".myDiv").on("click",function(){
$(this).next("ul").slideToggle(300).siblings("ul").slideUp(500)
})
})
</script>
</html>
手风琴效果
最新推荐文章于 2024-09-24 11:41:48 发布