案例1：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(45, 44, 65);
}
.div1 {
margin: 50px auto;
width: 250px;
border-radius: 5px;
overflow: hidden;
}
ul {
/* border: #000000 1px solid; */
width: 200px;
}
ul li {
width: 250px;
height: 40px;
list-style: none;
overflow: hidden;
transition: all linear .3s;
}
.l1 {
width: 250px;
height: 40px;
line-height: 30px;
color: #1c1919;
font-size: 14px;
/* background-image: linear-gradient(#ab1380, #d8508f#ab1380); */
background-color: #ffffff;
overflow: hidden;
border: 1px solid rgb(218, 218, 218);
padding-left: 20px;
font-weight: bold;
}
.l1 span {
transition: all linear .3s;
display: inline-block;
transform: rotate(90deg);
margin-left: 180px;
}
ul li ul li {
width: 250px;
height: 40px;
line-height: 30px;
color: #fff;
font-size: 14px;
background-color: rgb(68, 67, 89);
border-top: 1px solid rgba(183, 179, 179, 0.4);
padding-left: 32px;
}
ul li ul li:hover {
background-color: rgb(182, 59, 77);
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li>
<div class="l1">一级<span>></span></div>
<ul>
<li>hh</li>
<li>hh</li>
<li>hh</li>
<li>hh</li>
</ul>
</li>
<li>
<div class="l1">一级<span>></span></div>
<ul>
<li>hh</li>
<li>hh</li>
<li>hh</li>
<li>hh</li>
</ul>
</li>
<li>
<div class="l1">一级<span>></span></div>
<ul>
<li>hh</li>
<li>hh</li>
<li>hh</li>
<li>hh</li>
</ul>
</li>
<li>
<div class="l1">一级<span>></span></div>
<ul>
<li>hh</li>
<li>hh</li>
<li>hh</li>
<li>hh</li>
</ul>
</li>
<li>
<div class="l1">一级<span>></span></div>
<ul>
<li>hh</li>
<li>hh</li>
<li>hh</li>
<li>hh</li>
</ul>
</li>
</ul>
</div>
<script>
let l1 = document.querySelectorAll('.l1')
let jt = document.querySelectorAll('.l1 span')
// console.log(typeof (l1));
l1.forEach(item => {
item.onclick = function () {
let oneLi = item.parentNode;
let subUl = oneLi.getElementsByTagName('ul');
// console.log(subUl.length);
if (subUl.length == 0) {
oneLi.style.color = 'rgb(200,59,77)'
return;
}
let height = oneLi.style.height
if (height == '' || height == '40px') {
//展开
l1.forEach(item => {
item.style.color = 'black';
item.parentNode.style.height = '40px'
item.lastElementChild.style.transform = 'rotate(90deg)'
})
item.style.color = 'rgb(200,59,77)'
item.lastElementChild.style.transform = 'rotate(-90deg)'
let subUl = oneLi.getElementsByTagName('li')
oneLi.style.height = (40 + subUl.length * 40) + 'px'
} else {
oneLi.style.height = '40px'
item.style.color = 'black'
item.lastElementChild.style.transform = 'rotate(90deg)'
}
}
});
</script>
</body>
</html>
效果图：
