- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Beispiel
Es hat den gleichen Effekt wie diese Animation. Nach dem Klicken auf die Schaltfläche wird sie angezeigt und hat den gleichen Animationseffekt. Aber ich habe es definitiv zu kompliziert geschrieben. Gibt es eine einfachere Lösung (keine Notwendigkeit für Bibliotheken von Drittanbietern)?
为情所困2017-06-30 10:01:55
比较简单的思路是：
方块无需隐藏，只需要设置高度为0就看不见了
用transition实现动画效果
不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了
另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了
我在你的代码上做了点修改，如下：
https://jsfiddle.net/boxsnake...
女神的闺蜜爱上我2017-06-30 10:01:55
<!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>
<p class="box" style="height: 0;"></p>
</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>
高洛峰2017-06-30 10:01:55
可以用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>