Drupal中的Javascript:this.nextElementSibling在Drupal中返回NULL，但在普通HTML文件中工作

我有以下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>

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

当我在一个静态HTML文件上运行相同的HTML内容时，折叠、展开工作正常。（上面的Window.alert以Drupal和静态HTML显示[object HtmlButtoneElement]。但是当在我的Drupal页面中使用相同的HTML/JS/CSS代码时，this.nextElementSibling返回NULL，因此不能调用toggle（“show”）

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

以下是整个静态HTML脚本的完整内容（工作正常）：

手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡：0.6s缓进缓出；
不透明度：0；
}
div.panel.show{
不透明度：1；
最大高度：500px；
}
动画手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

更新 问题是由于Drupal在标记周围自动注入标记。我尝试用一个

来包装每个

，现在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>

第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。

问题很可能是因为代码在页面本身完成呈现之前运行

---

您可以在该行设置一个断点（或使用

调试器
语句），然后检查DOM。
最可能的情况是，问题发生是因为代码在页面本身完成呈现之前运行

您可以在该行设置一个断点（或使用
调试器
语句），然后检查DOM。
注意JavaScript上的单词this，this将根据您的范围返回数据，为了不丢失引用，通常的解决方案是将此引用存储在名为self的变量中，如下所示：

var _self= this;
//then access later to the reference
_self.foo()

试试这个办法，
最好
注意JavaScript上的单词this，this将根据您的范围返回数据，为了不丢失引用，通常的解决方案是将this引用存储在名为self的变量中，如下所示：

var _self= this;
//then access later to the reference
_self.foo()

试试这个办法，
最好的
我在页面完成渲染后检查了HTML结构，发现Drupal正在我的

标记周围注入标记

我提供的原始HTML是：

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

第1节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

但以下是HTML检查器的结果：

（注意按钮周围的标签）。因此，我似乎只需要修改我的选择逻辑，钻出，然后返回到下一个相邻的div。不过这是一个很难解决的问题。我真的希望Drupal不要弄乱我写的HTML。。。也许有一个选项可以关闭这种格式。也许它正在将我的新行转换为标记。我也会试试写