为什么我们可以在动画手风琴中使用 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;
}
慕尼黑85498601回答
-
慕虎7371278
max-height- 允许元素小于设定值。例如height: 20px; max-height: 30px;-> 元素是 20px 高度。当您申请时height，除了您设置的尺寸之外，您不允许使用任何其他尺寸的元素。这就是它与max-heightand一起工作的原因height。检查最大高度和高度overflow:hidden; height: 0;是必需的，因为即使您设置的高度小于内容，此内容仍将在框外可见。设置overflow: hidden将隐藏超过高度的元素内容。
随时随地看视频慕课网APP
相关分类
JavaScript