javascript - 我的 Javascript 代码无法在 Wordpress 中运行

Question

我完全不知道如何按照说明“识别”代码，所以如果可以的话，我就把它贴在这里。

无论如何，我正在我母亲的 Wordpress 网站上工作以帮助她，我正在尝试为她的常见问题解答列表创建一个“ Accordion ”。我从我经常使用的 W3 学校获取了一个模板，请在此处查看我要创建的内容... https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

我能够使用 HTML 和 CSS，但我不太确定如何让 Javascript 在我应用的代码中工作。结果是一个非交互式的 Accordion 。这就是它最终出现在我母亲网站的虚拟页面上的方式...... http://www.andreeharpur.com/student-faqs-dummy-page/

在尝试创建单独的 .js 文件以及使用短代码上传到 Wordpress 以防止页面加载速度变慢之后，我被卡住了，但我真的卡在了这个阶段。我只是不知道自己在做什么。

在此阶段，非常感谢您提供一些指导!

您是否对这些代码感到“不满意”？我有没有搞砸任何地方我怎样才能纠正它并在下次吸取教训？

如果我在这里对你们这些编程高手显得愚蠢，我很抱歉，我真的很想通过应用它来尽可能地学习。这就是我最好的学习方式。

谢谢，下面是我在妈妈的网站上申请 Accordion 的代码...

var acc = document.getElementsByClassName("accordion");
var i;

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

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 1

您的代码本身运行良好。但是网站打印这个

var acc = document.getElementsByClassName("accordion");
var i;</p>

有一个<p> (html) 标记在您的 javascript 中。确保使用 wordpress 的“文本” View 。如果您插入源代码，则不是视觉 View 。