<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("li").click(function() {
/*获得父元素中的子元素*/
var $menu = $(this).children(".menu");
/*动画*/
$menu.slideDown(1000);
/*筛选同辈元素的集合意思就是说除了选中的元素别的元素*/
var $ine = $(this).siblings().children(".menu");
$ine.slideUp(1000);
})
})
</script>
<style type="text/css">
li {
list-style: none;
}
.container {
width: 200px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
border-radius: 10px;
}
.container li {
color: pink;
border-bottom: 1px solid black;
padding: 20px 20px;
}
.container span {
float: right;
}
.menu {
display: none;
}
.menu li {}
</style>
</head>
<body>
<div class="container">
<ul>
<li>一级菜单<span>></span>
<ul class="menu">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span>></span>
<ul class="menu">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span>></span>
<ul class="menu">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单<span>></span>
<ul class="menu">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</li>
<li>一级菜单<span>></span>
<ul class="menu">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
jquery 实现折叠菜单效果
最新推荐文章于 2022-07-18 19:17:52 发布