Несколько попыток не удалось развернуть все JS - PullRequest
Новая
       26

Несколько попыток не удалось развернуть все JS

0 голосов
/ 09 марта 2019 
jQuery(document).ready(function( $ ){

var acc30 = document.getElementsByClassName("acc30");
var acc = document.querySelectorAll("accordion");

acc30.addEventListener("click", function () {
this.classList.toggle("active");

for (var i = 0; i < acc.length; i++) {
    if (acc[i].getAttribute("data-following") === "0") {
 acc[i].classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = acc[i].nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }

    }
}

  });
});

Привет всем. Я знаю, что мы должны сделать это широко актуальным, но есть несколько сообщений на эту тему, которые мне не подошли, поэтому я получаю конкретную информацию ...

Я использую «аккордеонные» кнопки, которые на самом деле не являются аккордеонами, они открывают сразу несколько панелей. Панели под ними скрыты или показаны. acc30 - кнопка «Развернуть все» (для 30 «баянов»). Я также попытался выполнить итерацию click () через массив аккордов, и попытался выполнить итерацию по массиву панели, используя только ту часть этого кода в массиве, используя getElementsByClassName (панель). ... и несколько других вещей .... Я что-то упускаю из виду?

Заранее спасибо!

И CSS ...: 

.accordion {
  background-color: #e5a000;
  color: #f7f6f1;
  cursor: default-button;
  padding: 3%;
  width: 100%;
  text-align: left;
  border: none;
    border-radius: 0 !important;
    transition-timing-function: ease;
    transition: 12s;
}

.acc2 {
      background-color: #66fff2 !important;
}

.acc30 {
    background-color:transparent !important;
    color:#e5a000;
    cursor: default-button;
  padding: 3%;
  width: 100%;
  text-align: left;
  border: none;
    border-radius: 0 !important;
    transition-timing-function: ease;
    transition: 12s;
    font-weight:300;
}

И отдельные аккордеоны сами прекрасно работают, используя этот JS: 

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;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
...