html+css+js实现手风琴/折叠效果右侧菜单
效果:点击一级菜单,打开二级菜单,再次点击一级菜单,二级菜单关闭;
点击一级菜单,其他一级菜单都是关闭效果
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手风琴效果</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 200px;
height: 45px;
text-align: center;
line-height: 45px;
background: rgb(51, 92, 153);
color: white;
font-weight: bold;
transition: all 0.3s;
cursor: pointer;
border-bottom: 1px solid whitesmoke;
overflow: hidden;
}
a {
text-decoration: none;
color: white;
}
.subMenu li {
background: rgb(144, 149, 255)
}
</style>
</head>
<body>
<ul>
<li onclick="openMenu(this)">
<a href="#">首页</a>
</li>
<li onclick="openMenu(this)">
<a href="#">新闻</a>
<ul class="subMenu">
<li>
<a href="#">子菜单1</a>
</li>
<li>
<a href="#">子菜单2</a>
</li>
<li>
<a href="#">子菜单3</a>
</li>
</ul>
</li>
<li class="tst" onclick="openMenu(this)">
<a href="#">技术支持</a>
<ul class="subMenu">
<li>
<a href="#">子菜单1</a>
</li>
<li>
<a href="#">子菜单2</a>
</li>
</ul>
</li>
<li onclick="openMenu(this)">
<a href="#">关于我们</a>
<ul class="subMenu">
<li>
<a href="#">子菜单1</a>
</li>
</ul>
</li>
</ul>
<script>
function openMenu(obj) {
// 获取页面中所有li
let liAll=document.getElementsByTagName("li");
// 点击一级li获得二级li的个数
let num=obj.getElementsByTagName("li").length;
// 点击一级菜单,显示二级菜单,再次点击,关闭二级菜单
if(obj.style.height=="45px"||obj.style.height==""){
obj.style.height=45*(num+1)+"px";
}else if(obj.style.height!="45px"){
obj.style.height="45px";
}
// 点击自己,同级关闭二级菜单
for(let i=0;i<liAll.length;i++){
if(obj!=liAll[i]){
liAll[i].style.height="45px";
}
}
}
</script>
</body>
</html>
效果:
html+css+js实现手风琴折叠效果展示