<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
.box{
width: 300px;
margin: 0 auto;
color: #fff;
}
.box li{
cursor: pointer;
}
.box>li{
background-color: green;
font:bold 18px/38px "宋体";
overflow: hidden;
height: 38px;
}
.box>li+li{
border-top: 1px solid #CCCCCC;
}
.box>li li{
background-color: #0000FF;
font:bold 16px/28px "宋体";
padding-left: 20px;
}
.box>li li+li{
border-top: 1px solid #CCCCCC;
}
.box>li li:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<ul class="box">
<li class="menu">
<p>菜单1</p>
<ul class="small-box">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
<li class="menu">
<p>菜单1</p>
<ul class="small-box">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
<li class="menu">
<p>菜单1</p>
<ul class="small-box">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
<li class="menu">
<p>菜单1</p>
<ul class="small-box">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
</ul>
</body>
<script src="animate.js"></script>
<script>
var lis = document.querySelectorAll(".menu");
for(var i = 0;i<lis.length;i++){
lis[i].firstElementChild.isOpen = true; //表示可以打开
lis[i].firstElementChild.onclick = function(){
//this 指的是 p
var li = this.parentNode; //获取相应的li
var ul = li.querySelector(".small-box"); //获取li下的ul
var ph = this.offsetHeight; //p的高度
var ulh = ul.offsetHeight; //ul的高度
var zh = ulh + ph; //li的高度
if(this.isOpen){
this.isOpen = false;
animate(li,{height:zh})
}else{
this.isOpen = true;
animate(li,{height:ph})
}
}
}
</script>
</html>
js二级菜单
最新推荐文章于 2023-12-09 15:37:43 发布