为什么我们可以在动画手风琴中使用 height 属性而不是 max-height 属性？

为什么在这段代码中我可以使用高度而不是最大高度，所以它仍然有效？第二个问题是：为什么我们必须在高度为零时将溢出属性设置为隐藏。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate 这是上面的原始代码。var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.height){ panel.style.height = null; } else { panel.style.height = panel.scrollHeight + "px"; } }); } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; height: 0; overflow: hidden; transition: height 0.2s ease-out; }

查看完整描述

1 回答

慕虎7371278

TA贡献1802条经验获得超4个赞

max-height- 允许元素小于设定值。例如height: 20px; max-height: 30px;-> 元素是 20px 高度。当您申请时height，除了您设置的尺寸之外，您不允许使用任何其他尺寸的元素。这就是它与max-heightand一起工作的原因height。检查最大高度和高度
overflow:hidden; height: 0;是必需的，因为即使您设置的高度小于内容，此内容仍将在框外可见。设置overflow: hidden将隐藏超过高度的元素内容。

反对回复 2021-08-20

热搜

最近搜索清空

为什么我们可以在动画手风琴中使用 height 属性而不是 max-height 属性？

为什么我们可以在动画手风琴中使用 height 属性而不是 max-height 属性？

1 回答

添加回答