Question

我正在尝试在我的网站上设置全部展开按钮。我有两个级别的扩展和折叠链接，并且当有人想要查看所有内容而不点击时，我希望有一个全部展开选项。我想我知道自己需要做什么 - 循环播放所有手风琴并将它们设置为显示。你能给我一些提示吗？

这是代码。请帮忙。

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>

Answer 1

您可以要求文档为您提供所有.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>

Answer 2

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/

立即展开全部

2 个答案: