Javascript

Question

在 this article 的帮助下，我创建了一个 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>

Answer 1

添加一些css设置初始值为0

#akkordeon-content1 {
  height: 0;
}

还有一个名为 details 的 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

Answer 2

var section = document.querySelector('#akkordeon-content1');
collapseSection(section)

将该代码添加到您的 javascript。在任何事物之外

Answer 3

让你的容器默认隐藏即可。

.collapsible {
   height: 0;
}

并从代码中删除这一行，使其不会向后折叠：

//(line 42) element.style.height = null;

Javascript - 手风琴不会开始折叠

Javascript - accordion doesn't start collapsed

html

css

transition

accordion