Javascript - аккордеон не запускается в свернутом виде
С помощью эта статья я создал аккордеон javascript.
Единственная проблема в том, что он не запускается в свернутом виде, и я не могу этого понять.
Спасибо за вашу помощь
<div id = "toggle-button1" class = "section akkordeon">
<div class = "akkordeon-title">LOREM IPSUM TITLE</div>
<div id = "akkordeon-content1" class = "section collapsible">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Добавьте немного css, чтобы установить начальное значение на 0
#akkordeon-content1 {
height: 0;
}
Также есть элемент HTML с именем подробности, который выполняет эту функцию за вас.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Вы должны закомментировать эту строку: element.style.height = null;
Как Максим сказал в своем комментарии: вот форк codepen.io/anon/pen/oVZYJa
Спасибо! Почти готово, но теперь вам нужно щелкнуть по контейнеру два раза, потому что вы сначала перезаписываете «height: 0;» указанный в css с «высотой: 0;», который javascript помещает в элемент, и при втором щелчке javascript добавляет правильную высоту... Есть идеи, как это можно исправить?
Да, добавьте атрибут данных в свой html. Добавьте data-collapse = true к свернутому элементу. Проверьте здесь codepen.io/anon/pen/LaWLLo
var section = document.querySelector('#akkordeon-content1');
collapseSection(section)
добавьте этот код в свой javascript. вне ничего
Спасибо, это вроде работает. Единственное, технически он не запускается свернутым, а сворачивается, когда вы заходите на страницу, поэтому вы можете увидеть короткую анимацию при входе, где закрывается аккордеон. Может есть способ деактивировать переход, но только на первый раз?
Просто скройте контейнер по умолчанию.
.collapsible {
height: 0;
}
И удалите эту строку из кода, чтобы она не сворачивалась обратно:
//(line 42) element.style.height = null;
Спасибо! Почти готово, но теперь вам нужно щелкнуть по контейнеру два раза, потому что вы сначала перезаписываете «height: 0;» указанный в css с «высотой: 0;», который javascript помещает в элемент, и при втором щелчке javascript добавляет правильную высоту... Есть идеи, как это можно исправить?
Если вы добавите «высота: 0;» to #akkordeon-content аккордеон продолжает закрываться, так что это не работает...