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