Question

我正在开发一个需要手风琴的项目，我在W3School上找到它并且效果很好。

我正在尝试使用Javascript添加关闭所有按钮，但没有成功。

我很喜欢使用Javascript，根据我在原始代码中的理解，每当我们点击“accordion”时它会使类“活动”，那么直接位于我们点击的“面板”类将会关闭或打开到一定高度。

因此，对于关闭所有按钮，我尝试创建一个按钮，每当我们点击它时，所有文本类都将以与前一个函数相同的方式关闭。

不确定为什么它不起作用，所以我更改了代码，当我们点击关闭所有按钮时，文本变为红色（只是为了测试），并且它工作正常。

当我尝试使用maxHeight = null时;我没有收到任何错误消息。有人知道我做错了什么以及如何解决它？

由于

（见下面的代码）

https://jsfiddle.net/16qpjv5y/3/

HTML + JAVASCRIPT

<h2>Accordion</h2>

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

<div class="closeall" onclick="collapseall()">Close All</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

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

function collapseall() { //problematic part
    var x = document.getElementsByClassName("text");
    var b;
    for (b = 0; b < x.length; b++) {
         x[b].style.maxHeight = null;
  }
}
</script>

CSS

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

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

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

.closeall {
    float: right;
    margin: 1% 2% 0 0;
    cursor: pointer;
}

Answer 1

你需要这样做：

function collapseall() {  //problematic part
    var x = document.getElementsByClassName("accordion");
    var b;
    for (b = 0; b < x.length; b++) {
    x[b].classList.remove("active");
    var panel = x[b].nextElementSibling;
    panel.style.maxHeight = null;
}

问题是你发现所有带有.text而不是.panel的元素都有转换和其他正确的CSS设置。

Answer 2

您已将最高权限更改应用于.text，且应为.panel。但是，您还需要从按钮中删除.active类。

＆＃13;

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;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.closeall {
    float: right;
    margin: 1% 2% 0 0;
    cursor: pointer;
}

＆＃13;

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p class="text">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 class="text">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 class="panel">
  <p class="text">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>

<div class="closeall" onclick="collapseall()">Close All</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

function collapseall() {  //problematic part
    var x = document.getElementsByClassName("panel");
    var b;
    for (b = 0; b < x.length; b++) {
        x[b].style.maxHeight = null;
        x[b].previousElementSibling.classList.remove('active');
  }
}
</script>

＆＃13;

关闭W3School手风琴的所有按钮（仅限html，css，js）

2 个答案: