JavaScript аккордеон в омеке - PullRequest
Новая
       21

JavaScript аккордеон в омеке

0 голосов
/ 18 мая 2018

Я пытаюсь создать кнопки аккордеона на своем сайте Omeka, поэтому нашел код из W3Schools для адаптации.Я смог заставить это работать при тестировании в HTML-документе с JavaScript внутри тегов , но теперь, когда я поместил этот код в собственный файл .js для загрузки в заголовок страницы, мои кнопки не работают.работает, и я получаю следующую ошибку: TypeError: панель пуста.

Ниже приведен код в моем файле .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>

1 Ответ

0 голосов
/ 18 мая 2018

Вы устанавливаете свойство max-height для класса .panel, и вы пытаетесь установить display:block или none с помощью javascript. Вы должны установить maxHeight с помощью scrollHeight из * 1007.* или используйте display:none внутри класса .panel вместо свойства 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>
...