左侧导航条的展开效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航条的动画效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
li{list-style:none;color:#fff;text-align: center;}
.l1{height:28px;width:80px;background-color:#333;line-height: 28px;font-size:18px;border:1px solid #757575;}
.l2{height:20px;width:80px;background-color:#757575;line-height: 20px;font-size:12px;border:1px solid #e0e0e0;display:none;position:relative;left:-40px;}
</style>
</head>
<body>
<ul id="ul0">
<li class="l1">语文</li>
<ul id="ul1">
<li class="l2">一年级</li>
<li class="l2">二年级</li>
<li class="l2">三年级</li>
<li class="l2">四年级</li>
</ul>
<li class="l1">数学</li>
<ul> <li class="l2">一年级</li>
<li class="l2">二年级</li>
<li class="l2">三年级</li>
<li class="l2">四年级</li>
</ul>
<li class="l1">英语</li>
<ul>
<li class="l2">一年级</li>
<li class="l2">二年级</li>
<li class="l2">三年级</li>
<li class="l2">四年级</li>
</ul>
</ul>
<script>
$(document).ready(function(){
$('#ul0>li').click(function(){
$('#ul0 .l2').hide()
$(this).next().find('.l2').slideDown(1000)
})
})
</script>
</body>
</html>