最近打算做一些交互優化方面的輪子。雖然輪子別人都弄過，但是自己沒弄過。重復造輪子對知識理解還是有好處的。本次輪子如題目。直接代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideup 和 slideDown效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
margin-top: 40px;
width: 200px;
}
#box li {
list-style: none;
}
#box ul {
transition: all 1s;
overflow: hidden;
height: 0;
}
.show {
height: 63px !important;
}
</style>
</head>
<body>
<div id="box">
<h2>菜單</h2>
<ul class="show">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$('body').on('click', 'h2', function() {
$("#box ul").toggleClass('show')
})
</script>
</body>
</html>
注意：變化的ul需要提前設定height，還有overflow屬性。