Question

我想向我的（localhost）WordPress网站添加一个具有以下功能的可折叠按钮：

按钮宽度不必为100％，但必须适应按钮内的文字
button插入一行文本中，而不必强行将按钮后的单词移至下一行（我尝试使用plugin-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，所以这就是我要做的

将.collapsible和.content添加到style.css文件中
使用插件将JavaScript添加到页脚

然后在一篇帖子中，我编写了以下代码

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

但是，当按钮正确显示时，单击按钮则没有任何反应。由于按钮已显示，我认为问题与javascript代码有关。这就是我的帖子中显示的内容

您会看到另一个问题是第一行和第二行之间的空白。

我几乎可以确定已加载了javascript，因为当我打开页面源代码（CTRL + U）时，我看到标记之前的一行显示了脚本。

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内。

为什么我的可折叠按钮没有折叠？

1 个答案: