logo标签列表

当单击链接时如何更改HTML表的高度？

htmlcsscss-transitions
3

嗨，我想通过点击一个按钮，在2秒钟内以平滑的过渡方式将HTML表格的高度从690更改为400。有没有一种使用纯CSS实现的方法？以下是我的例子：

<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr>
<td>
<button type="button">Click Me!</button>
</td>
</tr>
<tr>
<td height="690" width="1280> <--- This cell needs it height to change to 400px when the button is clicked.
Cell 1
</td>
</tr>
</table>
</body>
</html>
3个回答
4

你无法仅使用 CSS 实现该功能，但你可以轻松使用 jQuery 实现：

// Use a more specific selector by ID or class
$('button').click(function (event) {
    $(this).closest('tr').next().children('td:first').animate({height: 400}, 2000);
});
1
你需要使用JavaScript。 使用function click() { document.getElementById('id').setProperty('style', 'height:100px;'); } 作为按钮。
0
给按钮（clickbut）和表格（tableheight）分配ID，然后使用jQuery。
$(document).ready(function(){
  $("#clickbut").click(function(){
    $("#tableheight").css('height','somevalue eg:300px');
  });
});
哇，这个很好用，谢谢！有没有办法让它平滑移动，像过渡一样？ - william44isme
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接