Rumah > Soal Jawab > teks badan
Contoh
Ia mempunyai kesan yang sama seperti animasi ini disembunyikan dahulu. Selepas mengklik butang, ia dipaparkan dan mempunyai kesan animasi. Tetapi saya pasti menulisnya terlalu rumit Adakah terdapat penyelesaian yang lebih mudah (tidak memerlukan perpustakaan pihak ketiga)?
为情所困2017-06-30 10:01:55
Idea yang lebih mudah ialah:
Blok tidak perlu disembunyikan, cuma tetapkan ketinggian kepada 0 dan ia tidak akan kelihatan
Gunakan transition untuk mencapai kesan animasi
Tidak perlu gunahidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无showIa hanya tersembunyi
Selain itu, tidak perlu menulis show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()hanya tukar status paparan
Saya membuat beberapa pengubahsuaian pada kod anda, seperti berikut:
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
Soalan boleh diselesaikan dengan CSS3 (jika ia tidak perlu serasi dengan IE)
高洛峰2017-06-30 10:01:55
Bolehkah ia dilaksanakan dengan 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>