Question

我有这个问题设置此脚本在我的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，因为窗口警报显示我＆＃34; null＆＃34;，示例页面中的警告显示我＆＃34; [object HTMLDivElement]＆＃34;

所以我认为nextElementSibling没有分配＆＃34;面板＆＃34; class divs到面板变量。

问题是为什么它在示例页面中起作用而不在我的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它应该可以使用，或者您可以通过将以下内容添加到您的函数文件中来禁用自动p标记，或者在使用下一个兄弟之前修改您的js以选择父p元素。

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

nextElementSibling无法在Wordpress中运行

1 个答案: