css3实现jQuery的slideUp和slideDown效果
最近打算做一些交互优化方面的轮子。虽然轮子别人都弄过，但是自己没弄过。重复造轮子对知识理解还是有好处的。本次轮子如题目。直接代码。
<!DOCTYPE html>
<html >
<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 >
<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属性。