点击切换是最常见的动态效果，我们用 JQuery 来实现它。
<!DOCTYPE html>
<html>
<head>
<title>切换效果</title>
</head>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('span').eq(0).click(function() {
$('ul').show()
})
$('span').eq(1).click(function() {
$('ul').hide()
})
})
</script>
<body>
<p><span>点击打开</span> / <span>点击关闭</span></p>
<ul style="display: none;">
<li>首页</li>
<li>分类</li>
<li>...</li>
</ul>
</body>
</html>如果你希望在打开和关闭的过程，能有点不一样的动画功能，例如 慢慢的伸长、若隐若现 可以尝试下面两个方法。
// 无效果
show() // 显示
hide(3000) // 3秒消失 | 所有方法都可以加入时间
// 伸缩
slideDown()
slideUp()
// 淡入淡出
fadeIn()
fadeOut()toggle 是 show 和 hide 合二为一的方法，它会判断目标元素是显示状态还是隐藏状态，然后对它 智能切换。
toggle() // 无效果切换
slideToggle() // 伸缩切换
fadeToggle() // 淡入淡出切换