javascript - nextElementSibling在Wordpress中不起作用

我在设置此脚本以在我的Wordpress网站上工作时遇到了问题。该代码使用nextElementSibling获取与W3schools页面中所示相同的关卡元素（以制作手风琴）：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

<style>
button.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;
}
button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}
div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}
</style>

<h2>Accordion</h2>

<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 sco 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>

<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
       var panel = this.nextElementSibling;
       window.alert(panel);
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

您可以看到我的脚本与W3Schools页面中的脚本完全相同，除了窗口警报行（我用来查看正在发生的情况）之外。好吧，什么都没有发生，当我按下任何一个按钮时，什么也没有显示。但是我怀疑nextElementSibling无法正常工作，因为窗口警报显示为“ null”，示例页面中的警报显示为“ [object HTMLDivElement]”。

因此，我认为nextElementSibling并未将“ panel”类div分配给panel变量。

问题是为什么它在示例页面而不在我的Wordpress帖子中有效？

此外，此脚本在我的同一个帖子中也可以完美运行（因此错误不是javascript实现）：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

请帮忙。

最佳答案

Wordpress auto p标签将您的按钮元素包装在一个段落中，因此面板类的div不再是您的下一个兄弟姐妹

<p><button class="accordion">Section 1</button></p>

您可以将下一个同级行更新为parentElement.nextElementSibling，它应该可以工作，或者可以通过将以下内容添加到函数文件中来禁用auto p标签，或者在使用下一个同级之前将js修改为选择父p元素。

<?php remove_filter ('the_content', 'wpautop'); ?>

关于javascript - nextElementSibling在Wordpress中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47762516/