实现效果主要用到的两个方法就是 slideDown 及slideUp ,其实换做slideToggle效果也不错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠</title>
<link rel="icon" href="../../../img/sup.ico" type="image/x-icon">
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.panel {
margin: 10px auto;
width: 200px;
background: linear-gradient(90deg, pink, wheat);
list-style: none;
font-size: 20px;
border-radius: 5px;
}
.Level {
border: 1px solid #333333;
position: relative;
line-height: 40px;
cursor: pointer;
}
.Level span {
position: absolute;
right: 10px;
/*transform: rotate(90deg);!*顺时针旋转90°*!*/
}
.Level:hover {
background: linear-gradient(90deg, darksalmon, deeppink);
}
.panel li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.panel li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.fold {
list-style: none;
height: 125px;
}
.fold li {
width: 198px;
height: 30px;
background: linear-gradient(90deg, whitesmoke, wheat);
border-top: 1px solid #333;
line-height: 30px;
white-space: pre; /*按照pre标签规则书写,空格,换行等不被过滤*/
cursor: default;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<ul class="panel">
<li class="Level">一级菜单<span>></span>
<ul class="fold hidden">
<li> 二级菜单</li>
<li> 二级菜单</li>
<li> 二级菜单</li>
<li> 二级菜单</li>
</ul>
</li>
<li class="Level">一级菜单<span>></span>
<ul class="fold hidden">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="Level">一级菜单<span>></span>
<ul class="fold hidden">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="Level">一级菜单<span>></span>
<ul class="fold hidden">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="Level">一级菜单<span>></span>
<ul class="fold hidden">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<script>
$(function () {
$('.Level').on('click', function () {
$(this).children('.fold').slideDown()//点击显示二级菜单
.parent().children('span').css({transform: 'rotate(90deg)'});// > 方向变为向下
let $sibling = $(this).siblings().children('.fold');//获取点击的li的兄弟元素中的二级菜单
$sibling.slideUp(1000);//使其向二级菜单上折叠
$sibling.parent().children('span').css({transform: 'rotate(0deg)'})//>方向变回
})
})
</script>
</body>
</html>