JavaScript 欧梅卡的手风琴

Question

我正在尝试在我的 Omeka 站点中创建手风琴按钮，因此我从 W3Schools 中找到了一些代码来进行调整。在 HTML 文档中使用 < script > 标签内的 JavaScript 测试它时，我能够让它工作，但现在我已经将该代码放在它自己的 .js 文件中以加载到页面头部我的按钮不起作用，我收到以下错误：TypeError: panel is null.

下面是我的 .js 文件中的代码：

/*
 * Script for accordion buttons
 */

document.addEventListener("DOMContentLoaded", function () { 

var acc = document.getElementsByClassName("accordion");
var i;
var panel = document.getElementsByClassName("panel");

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = "none";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
});

这是我用过的CSS：

 /* --- Accordion Menu Buttons --- */

.accordion {
    background-color: #A4C4E9 !important;
    color: #000;
    cursor: pointer;
    width: 75%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion:hover {
    background-color: #999 !important;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    width: 75%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

这是HTML:

<p><button class="accordion">Section 1</button></p>
<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>

Answer 1

您正在为 .panel class 设置 max-height 属性并且您正试图通过以下方式设置 display:block 或 none javascript 你应该通过使用 div.panel 的 scrollHeight 来设置 maxHeight 或者在 .panel class 中使用 display:none共 max-height 属性.

Element.scrollHeight 只读属性是对元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容。

查看下面的演示

document.addEventListener("DOMContentLoaded", function() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {

      /* Toggle between adding and removing the "active" class,
      to highlight the button that controls the panel */
      this.classList.toggle("active");

      /* Toggle between hiding and showing the active panel */
      var panel = this.nextElementSibling; //.classList.toggle('active');

      if (panel.style.maxHeight == "") {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } else {
        panel.style.maxHeight = "";
      }
    });
  }


});

/* --- Accordion Menu Buttons --- */

.accordion {
  background-color: #A4C4E9 !important;
  color: #000;
  cursor: pointer;
  width: 75%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #999 !important;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  width: 75%;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel.active {
  max-height: 100%;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

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

JavaScript 欧梅卡的手风琴

JavaScript accordion in Omeka

javascript

omeka