Почему мы можем использовать свойство 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;
}
</style>
</head>
<body>
<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>
<button class = "accordion">Section 1</button>
<div class = "panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<button class = "accordion">Section 2</button>
<div class = "panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<button class = "accordion">Section 3</button>
<div class = "panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
</body>
</html>"и второй вопрос" пожалуйста, по одному вопросу на пост
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
max-height- разрешить элементу быть меньше установленного значения. Например.height: 20px; max-height: 30px;-> элемент имеет высоту 20 пикселей. Когда вы применяетеheight, вы не разрешаете использовать любой другой размер элемента, кроме того, который вы установили. Вот почему он отлично работает сmax-heightиheight. Проверьте максимальная высота и высота.overflow:hidden; height: 0;требуется, потому что даже если вы установите высоту меньше, чем содержимое, это содержимое все равно будет видно за пределами окна. Установкаoverflow: hiddenскрывает содержимое элемента, превышающее высоту.
отличное объяснение
Извините, сэр, не могли бы вы подробнее объяснить свои слова о высоте и максимальной высоте? Спасибо.
@Septic.SH Пожалуйста, прочитайте документацию об этом и сравните два значения. Один устанавливает фактическую высоту, а другой устанавливает для нее верхний предел.
Понятно. В этом коде не имеет значения, мы используем высоту или максимальную высоту, верно?
@Septic.SH Да, неважно
@Septic.SH Примите ответ, если он удовлетворяет ваши потребности
Хорошо. Большое спасибо.
«почему в этом коде я могу использовать высоту вместо максимальной высоты, и он все еще работает?» почему вы ожидаете, что этого не должно быть? Чего вы ожидали и что происходит вместо этого?