展开全部JS失败,尝试失败

时间:2019-03-09 03:50:59

标签: expand

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";
    }

    }
}

  });
});

大家好。我知道我们应该使它具有广泛的意义,但是关于此的几篇文章对我没有用,所以我变得很具体...

我正在使用“ accordian”按钮,这些按钮并不是真正的手风琴,它们一次可以打开多个面板。它们下面的面板被隐藏或显示。 acc30是全部展开按钮(适用于30个“ accordians”)。我还尝试通过Accordian数组迭代click(),并尝试使用getElementsByClassName(panel)在面板数组中仅使用代码的那部分迭代。 ...还有其他一些事情......我缺少一些重要的东西吗?

提前谢谢!

还有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";
    }
  });
}

0 个答案:

没有答案