Question

我完全不知道如何按照说明“识别”代码，所以我只想在这里发布，如果没关系的话。

无论如何，我正在我母亲的Wordpress网站上工作，以帮助她，我正在尝试为她的FAQ列表创建一个“手风琴”。我从W3学校拿了一个模板，我经常使用它，看看这里我想要创造什么...... https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

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

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

在这个阶段，我会非常感谢您的一点指导！

这些代码是否“关闭”给你？我在任何地方搞砸了我怎样才能纠正它并在下次学习我的课程？

很抱歉，如果我在这里编程wizzes看起来很愚蠢，我真的很想通过应用它尽可能地学习。这就是我学得最好的方式。

谢谢，这是我在下面的母亲网站申请手风琴的代码......

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>

您的javascript中有一个<p>（html）标记。确保使用wordpress的“文本”视图。如果插入源代码，则不是可视化视图。

我的Javascript代码无法在Wordpress

1 个答案: