Question

我的网站在wordpress模板上运行。我已经粘贴了W3School的整个手风琴代码（这里是https://www.w3schools.com/howto/howto_js_accordion.asp）。我的版本意外地不起作用。

我在main.css文件中包含了css行：

....    
/* styles for accordion*/
    .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; 
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/*end styles for accordion*/

我已经通过管理控制台在页面上添加了html代码：

<h2>Accordion</h2>

<button class="accordion">Section 1</button>  
    <div class="panel">   <p>Lorem ipsum</p> </div>

<button class="accordion">Section 2</button> 
    <div class="panel">   <p>Lorem ipsum</p> </div>

<button class="accordion">Section 3</button> 
    <div class="panel">   <p>Lorem ipsum</p> </div>

接下来，我已经创建了scripts.js文件，并在functions.php中使用wp_enqueue_script将其添加到模板中。这样我就可以在显示页面代码时看到它加载。

scripts.js文件的内容：

$(document).ready(function() {
    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.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
});

然后单击手风琴就什么也没有发生：控制台中没有js错误，手风琴的内容没有显示出来。我该如何运作？

更新1 将类名更改为唯一的 js

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

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("nikactive");
        var nikpanel = this.nextElementSibling;
        if (nikpanel.style.display === "block") {
          nikpanel.style.display = "none";
        } else {
          nikpanel.style.display = "block";
        }
      });
    }

css：

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

.nikactive, .nikaccordion:hover {
  background-color: #ccc; 
}

.nikpanel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
/*end styles for accordion*/

html：

<h2>Accordion</h2>
<button class="nikaccordion">Section 1</button>
<div class="nikpanel">
  <p>Lorem ipsum</p>
</div>
<button class="nikaccordion">Section 2</button>
<div class="nikpanel">
  <p>Lorem ipsum </p>
</div>
<button class="nikaccordion">Section 3</button>
<div class="nikpanel">
  <p>Lorem ipsum </p>
</div>

更新2 当我更改.js文件的顺序时，我的文件排在列表末尾，然后我得到一个错误

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.<anonymous> (scripts.js?ver=5.2.2:8)

所以我想

var nikpanel = this.nextElementSibling;

不起作用

Answer 1

您的错误是您将基本版本（非动画版本）与动画版本混在一起了。

对于基本版本，请删除min-height：0;并将其替换为display：none。这是因为您的最大高度为0，并且您的JavaScript代码正在将显示值从“无”更改为“阻止”，并且在点击时反之亦然。因此，该元素成为块元素，但是其高度受max-height：0限制。

您的CSS应该是：

 .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;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

或者您可以只更改JS来更改最大高度值，而不是显示值。

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";
    } 
  });
}

Answer 2

在CSS中替换

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

使用

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

我刚刚测试了您的代码，只是替换使它正常工作

Answer 3

我发现WordPress在我的html代码中添加了p标签，因此js脚本将幻影p标签视为目标标签，并尝试对它们应用操作。我通过以下方式禁用了此添加：

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

在我的functions.php中

我将手风琴粘贴到我的手风琴后停止工作

3 个答案: