Javascript - 手风琴不会开始折叠答案

【问题标题】：Javascript - accordion doesn't start collapsedJavascript - 手风琴不会开始折叠
【发布时间】：2019-03-07 09:18:34
【问题描述】：

在this article 的帮助下，我创建了一个javascript 手风琴。

唯一的问题是，它并没有开始崩溃，我似乎无法以这种方式得到它。

感谢您的帮助

CODEPEN

<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 html css accordion transition

【解决方案1】：

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

#akkordeon-content1 {
  height: 0;
}

还有一个名为 details 的 HTML 元素会为您执行此功能。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

文档： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

【讨论】：

如果加上“height: 0;”到 #akkordeon-content 手风琴会不断关闭自己，所以这不起作用......
你应该把这行注释掉：element.style.height = null;
就像 Maksims 在他的评论中所说：这是一个叉子codepen.io/anon/pen/oVZYJa
谢谢！差不多了，但是现在你需要点击容器两次，因为你首先覆盖了“height: 0;”在css中给出“height：0;”，javascript放在元素上，第二次点击时，javascript添加了正确的高度......有什么想法可以解决这个问题吗？
是的，将 data 属性添加到您的 html 中。将 data-collapse = true 添加到折叠的元素。在这里查看codepen.io/anon/pen/LaWLLo

【解决方案2】：

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

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

【讨论】：

谢谢你这有点工作。唯一的问题是，从技术上讲，它并没有开始折叠，而是在您进入页面时折叠，因此您可以在进入手风琴关闭的位置时看到简短的动画。有没有一种方法可以停用过渡，但仅限于第一次？

【解决方案3】：

只需让您的容器默认隐藏即可。

.collapsible {
   height: 0;
}

并从代码中删除这一行，使其不会倒塌：

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

【讨论】：

谢谢！差不多了，但是现在你需要点击容器两次，因为你首先覆盖了“height: 0;”在css中给出“height：0;”，javascript放在元素上，第二次点击时，javascript添加了正确的高度......有什么想法可以解决这个问题吗？