abstrakt：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!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">數(shù)學</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>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-02-12 12:41:18
Zusammenfassung des Lehrers：下次截個圖放上來, 這樣效果好點