例子
就像这个动画一样的效果，p先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。但我绝对我写的太复杂，有没有更简单的方案呢（不要第三方库）！
闭关修行中......
试试用transition：demo
比较简单的思路是：
方块无需隐藏，只需要设置高度为0就看不见了
用transition实现动画效果
transition
不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了
hidden
show
另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了
show()
hide()
toggle()
我在你的代码上做了点修改，如下：https://jsfiddle.net/boxsnake...
雷雷
题主可以配合CSS3解决（如果不需要兼容IE的话）
可以用jquery实现吗？
//头部引入jquery,toggle() <body> <p>bugbugbug</p> <button>Toggle</button> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("p").toggle(1000); }); }); </script> </body>
试试用transition：
demo
比较简单的思路是：
方块无需隐藏，只需要设置高度为0就看不见了
用
transition实现动画效果不需要使用
hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了另外无需写一个
show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了我在你的代码上做了点修改，如下：
https://jsfiddle.net/boxsnake...
雷雷
题主可以配合CSS3解决（如果不需要兼容IE的话）
可以用jquery实现吗？