javascript - nextElementSibling 在 Wordpress 中不起作用

Question

我在设置此脚本以在我的 Wordpress 站点中工作时遇到了这个问题。代码使用 nextElementSibling 获取相同级别的元素(制作 Accordion )，如 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 没有将“面板”类 div 分配给面板变量。

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

此外，此脚本在我的同一篇文章中运行良好(因此错误不是 javascript 实现):https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

请帮忙。

Answer 1

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

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

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

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