一次全部展开

我正在尝试在我的网站上有一个"全部展开"按钮。我有两个级别的展开和折叠链接，当有人想在不单击的情况下查看所有内容时，我希望有一个选项来全部展开。我想我知道我需要做什么 - 遍历所有手风琴并设置它们以显示.你能给我一些提示吗？

这是代码。请帮忙。

function ExpandAll() {
  var acc = document.getElementsByClassName("accordionMain");
  var i;
  for (i = 0; i < acc.length; i++) {
    var panel = this.Children
    panel.style.display = "block";
  }
}
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

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;
}
div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}

<!DOCTYPE html>
<head>
</head>
<body>
  <h2>Accordion</h2>
  <button onclick="ExpandAll();">Expand All</button>
  <button class="accordion">Section 2</button>
  <div class="panel">
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>
        content
      </p>
    </div>
  </div>
  <button class="accordion">Section 3</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>
</body>
</html>

您可以要求文档为您提供所有要显示.panel元素，如下所示

function ExpandAll() {
  var pannels = document.querySelectorAll('.panel');
 
  for (panel of pannels)
    panel.style.display = "block";
}

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;
}
div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}

<h2>Accordion</h2>
<button onclick="ExpandAll();">Expand All</button>
<button class="accordion">Section 2</button>
<div class="panel">
  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>
      content
    </p>
  </div>
</div>
<button class="accordion">Section 3</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>

ExpandAll()应该expandAll()(可能无关紧要，但它困扰着我(确保也为按钮的onclick更改它。

<button onclick="expandAll();">Expand All</button>

然后将代码更改为不查找acordionMain而是查找panel。getElementsByClassName(X)返回和数组。因此，您可以遍历该数组，并通过 JS 将样式设置为display: "block"。代码如下。

<script>
        function expandAll ()
        {
            var elements = document.getElementsByClassName("panel");
            for (var i = 0; i < elements.length; i++) {
                var panel = elements[i];
                panel.style["display"] = "block";
                }
        }
    </script>

编辑：

这是一个小提琴：https://jsfiddle.net/CraftingGamerTom/f6y96c2e/

相关内容

最新更新

热门标签：