极客观点
项目管理
HarmonyOS
就像这个动画一样的效果，div先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。但我绝对我写的太复杂，有没有更简单的方案呢（不要第三方库）！
比较简单的思路是：
方块无需隐藏，只需要设置高度为0就看不见了
用
transition实现动画效果不需要使用
hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了另外无需写一个
show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了
我在你的代码上做了点修改，如下：
https://jsfiddle.net/boxsnake...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.box{
background: red;
height: 200px;
width: 200px;
transition: height 0.8s;
}
</style>
<body>
<button onclick="changeHeight()">click me</button>
<div class="box" style="height: 0;"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function changeHeight(){
var box=$('.box')
if($('.box').height()!=0){
$('.box').height(0)
}else{
$('.box').height(200)
}
}
</script>
</html>
可以用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>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}8 回答6k 阅读✓ 已解决
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}9 回答9.4k 阅读
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？6 回答5k 阅读✓ 已解决
两个promise问题？
第一个问题，这个为什么先输出3后输出2呢 {代码...} 第二个问题，这个为什么会交错输出呢，142536 {代码...} promise小白一枚，上述两个疑问，希望能得到详细的解答5 回答3.6k 阅读✓ 已解决
如何自定义设置虚线边框的样式？
背景： {代码...} 如上图所示：虽然可以设置虚线边框，但是虚线边框的样式往往需要修改：比如:单个实线间的间距自定义调整;单个实线的长度自定义调整。5 回答8k 阅读✓ 已解决
Object assgin拷贝问题？
{代码...} 为什么这段代码会输出 {代码...} 而不是 {代码...} 呢？4 回答8k 阅读✓ 已解决
js如何在并发中同步两个fetch请求？
请求A的结果是B的参数，所以AB只能是同步请求，但有假设有100个AB请求，如何构造并发请求呢？ {代码...} 这个代码完全不行，等待时间太长了。假设一组AB耗时2s，上面的代码需要等待近1min才能获得数据，我希望能获得一组AB就显示一张图片，类似并行处理同步的AB？谢谢！7 回答10k 阅读
宣传栏
试试用transition：
demo