<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
body{
background: #f5f5f5;
font-family: "Microsoft YaHei";
font-size: 12px;
}
.wrap{
width:311px;
margin:50px auto;
padding:10px;
border:1px #ddd solid;
background: #fff;
}
.item{
margin-bottom: 10px;
}
.item .title{
height: 43px;
background: url("images/zakladka.png") 0 0 no-repeat;
padding-left:33px;
line-height: 43px;
color: #333;
cursor: pointer;
}
.item .title span{
display: block;
width:26px;
height: 37px;
float: right;
margin:3px 0 0 0;
background: url("images/off.png") 0 0 no-repeat;
}
.item ul{
margin:5px 0;
padding: 0 10px 0 33px;
overflow: hidden;
transition:all 0.6s ease;
}
.item ul li{
color:#8f9d4c;
line-height:26px;
cursor: pointer;
}
.item ul li:hover{
text-decoration: underline;
}
.sublist{
padding-left: 33px;
/*height:0;*/
overflow: hidden;
transition:all 0.6s ease;
}
.item ul li span{
display: block;
width:26px;
height: 26px;
float: right;
background: url("images/off.png") 0 -8px no-repeat;
}
</style>
<script>
window.onload = function(){
var uls = document.querySelectorAll("ul");
var titles = document.querySelectorAll(".title");
var ulh = [];
var last;
var subTile = document.querySelector(".sublist-title");
var subSpan = document.querySelector(".arrow");
var sublist = document.querySelector(".sublist");
var subHeight = sublist.offsetHeight;
//3级菜单显示隐藏
sublist.style.height = 0;
subTile.isShow = false;
subTile.addEventListener("click",function(){
var parent = this.parentNode;
if(!this.isShow){
var p_height = parent.offsetHeight;
sublist.style.height = subHeight + "px";
parent.style.height = p_height + subHeight + "px";
this.isShow = true;
changeArrow(subSpan,true);
}else{
var p_height = parent.offsetHeight;
sublist.style.height = 0;
parent.style.height = p_height - subHeight + "px";
this.isShow = false;
changeArrow(subSpan,false);
}
});
//二级菜单
for(var i = 0; i < uls.length;i++){
var height = uls[i].offsetHeight;
uls[i].style.height = 0;
uls[i].isShow = false;
ulh.push(height);
}
for(var i = 0; i < titles.length; i++){
(function(i){
titles[i].addEventListener("click",function(){
if(last && last != uls[i]){
last.style.height = 0;
last.isShow = false;
}
if(!uls[i].isShow){
uls[i].style.height = ulh[i] + "px";
uls[i].isShow = true;
}else{
sublist.style.height = 0;
sublist.isShow = false;
uls[i].style.height = 0;
uls[i].isShow = false;
}
last = uls[i];
});
})(i);
}
//修改箭头
function changeArrow(elem,state){
var str;
if(!state){
str = "url(‘images/off.png‘) 0 -5px no-repeat";
}else{
str = "url(‘images/on.png‘) 0 -8px no-repeat";
}
elem.style.background = str;
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="item">
<div class="title"><span></span>Item1</div>
<ul>
<li>subitem1</li>
<li class="sublist-title">
<span class="arrow"></span>
subitem2
<div class="sublist">
<p>subItem1_1</p>
<p>subItem1_2</p>
<p>subItem1_3</p>
<p>subItem1_4</p>
</div>
</li>
<li>subitem3</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</div>
<div class="item">
<div class="title"><span></span>Item1</div>
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
<li>subitem4</li>
</ul>
</div>
<div class="item">
<div class="title"><span></span>Item1</div>
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
</body>
</html>
时间： 2024-11-05 11:26:41