为什么我的可折叠按钮不折叠？

Question

我想向我的（本地主机）WordPress 站点添加一个具有以下功能的可折叠按钮：

• 按钮宽度不必为 100%，但必须适应按钮内的文本
• 按钮可以插入一行文本，而不会强制按钮后的文字转到下一行（我尝试了插件collapse-o-matic 但是按钮后的文字，即使它们写在同一行中，也是被迫转到下一行）

为了更好地理解你可以看到这张图片

我一直在寻找如何手动（没有插件）创建按钮，最后我找到了一个 w3schools 页面，在那里，我使用在线编辑器创建了我想要的按钮（上图），其代码如下

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

 .collapsible { background-color: #777; color: white; cursor: pointer; border: none; } .ccontent { padding: 0 18px; max-height: 0; overflow: hidden; transition: .3s ease-out; background-color: #f1f1f1; box-shadow: 5px 5px 10px 3px inset rgba(0, 0, 0, 0.60); }

 Does <button class="collapsible">this</button> work? <div class="ccontent"> <p>Yes!</p> </div> Good job!

接下来，我试图弄清楚如何将代码添加到WordPress，所以这就是我所做的

• 在 style.css 文件中添加了 .collapsible 和 .content
• 使用插件将 javascript 添加到页脚

然后在帖子中我写了以下代码

Does <button class="collapsible">this</button> work?
<div class="ccontent"><p>Yes!</p></div>
Good job!

但是，虽然按钮正确显示，但单击它时什么也没有发生。 由于按钮正在显示，我认为问题与 javascript 代码有关。 这是我的帖子中显示的内容

如您所见，另一个问题是第一行和第二行之间的空白。

我几乎可以肯定 javascript 已加载，因为当我打开页面源代码 (CTRL+U) 时，我看到在 </body> 标记之前的某些行显示了脚本。

Answer 1

如此处所示Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.<anonymous>让按钮工作足以编辑

var content = this.nextElementSibling;

在

var content = this.parentElement.nextElementSibling;

---

去除空白空间足以放置margin: -20px 0; 在.ccontent CSS 中。