13-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

这个解决方案要求我们检查方框的高度，然后确定下一步的行动。

注意，不使用 slideToggle , 该方法和 .animate({ height: 'toggle' }) 即使不是完全一样，也已经非常接近。

不使用切换方法的原因是：为了使切换正常工作，必须捕捉实际的高度。因为元素的高度从0开始，jQuery无法计算出完整的高度。如果使用 slideToggle , #revealUp 元素在短暂的时间里以1像素的高度出现，然后消失。这是因为没有可以用来显示动画的实际高度。

相反，我们确定高度是否大于0，然后相应地变动高度显示动画。因为元素嵌套在另一个绝对定位的元素中，所以可以将高度定为100%，这样它就会逐步变大直到充满整个空间。

警告

在本秘诀中，已经使用了 overflow:hidden 。但是，如果用户增大字体，我的示例会隐藏某些内容。在实际解决方案中，一定要测试内容在字体增大时仍然可用，并考虑确保显示用的方框足够大，或者在 #revealUp 元素上使用 overflow: auto 样式。