3.js
<script>
$(function(){
$(".fir").next().css({"display":"none"});
$('.fir').click(function(){
$(".fir").next().css({"display":"none"});//先清除所有的二级菜单
$(this).next().slideToggle(500);
});
});
</script>
1.效果
2.html+css
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq实现二级才拉菜单动画效果</title>
<script src="jquery-3.3.1.js"></script>
<style>
ul,li{
list-style:none;
padding: 0;
margin: 0;
}
<h1>{
margin: 0px !important;
padding: 0px !important;
}
li{
width: 200px;
background-color: red;
}
.nav{
background-color: #ccc;
width: 200px;
height: 500px;
}
a{
text-decoration:none ;
outline: none;
color: black;
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="first">
<a href="#" class="fir">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li class="first">
<a href="#" class="fir">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li class="first">
<a href="#" class="fir">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>