Drupal 中的 Javascript : this. nextElementSibling 在 Drupal 中返回 NULL，但可以在纯 HTML 文件中工作

Question

我有以下 javascript 方法，尝试在 HTML 部分上切换折叠或展开:

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            this.classList.toggle("active");
            window.alert(this);
            this.nextElementSibling.classList.toggle("show");
        }
    }
</script>

当我在静态 HTML 文件上运行完全相同的 HTML 内容时，折叠、展开工作正常。 (上面的 Window.alert 显示了 Drupal 和静态 HTML 中的 [object HTMLButtonElement])。但是，当使用嵌入到我的 Drupal 页面中的相同 HTML/JS/CSS 代码时， this.nextElementSibling 返回 NULL，因此无法调用切换(“show”)。

有谁知道为什么在 Drupal 中该方法会返回 NULL，但在静态 HTML 文件中一切正常。

这里是整个静态 HTML 脚本的完整内容(工作正常):

<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: #ddd;
}

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

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
</style>

<h2>Animated 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 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 id="foo" 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>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            this.classList.toggle("active");
            window.alert(this);
            this.nextElementSibling.classList.toggle("show");
        }
    }
</script>

更新该问题是由于 Drupal 在 标签周围自动注入(inject)

标签造成的。我用

包裹每个

，现在 Drupal 不理会它，并且不添加额外的标签，因此下一个同级逻辑工作正常。最终代码:

    <!-- DRUPAL will wrap < button > tags with < p > tags if < button > tags are not enclosed with some sort of parent tag.  Therefore, divs around them are needed. -->
<div>
<button class="accordion">Section 1</button>
<div class="panel">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.</div>
</div>

<div>
<button class="accordion">Section 2</button>
<div class="panel">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.</div>
</div>

<div>
<button class="accordion">Section 3</button>
<div class="panel">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.</div>
</div>

Answer 1

最有可能的是，出现此问题是因为代码在页面本身完成渲染之前运行。

您可以在该行设置断点(或使用调试器语句)，然后检查 DOM。