折叠手风琴加载.

Question

我试图让我的手风琴项目在页面加载时不可见。我希望它们仅在单击时可见，并希望在单击其他项目时该项目消失。我已经尝试了几种不同的选择，但似乎无法让它工作。请参阅下面的代码。

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

<div id="header">
  <h1>Fox Valley Runners Club</h1>
</div>
<div id="main"></div>
<div id="pics" class="panel">
  <div class="race_box">
    <img src="images/run1.jpg" id="5kpic" /><br />
    <figcaption>5k/10k Events</figcaption>
    <div class="races" id="5k">
      <h3>5k/10 Events</h3>
      <ul>
        <li class="accordion">Mini Sprint</li>
        <div class="panel">
          <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <li class="accordion">Iron Horse</li>
        <div class="panel">
          <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Twilight Trail</li>
        <div class="panel">
          <p>11/13/17, River's Edge Park, Wrightstown</p>
        </div>
      </ul>
    </div>
  </div>
  <div class="race_box">
    <img src="images/run2.jpg" id="halfpic" /></button><br />
    <figcaption>Half Marathon Events</figcaption>
    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="accordion">Fox River Marathon</li>
        <div class="panel">
          <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <li class="accordion">N.E.W. Half Marathon</li>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Winnebago Run</li>
        <div class="panel">
          <p>11/27/17, Menominee Park, Oshkosh</p>
        </div>
      </ul>
    </div>
  </div>
  <div class="race_box">
    <img src="images/run3.jpg" id="fullpic" /><br />
    <figcaption>Full Marathon Events</figcaption>
    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="accordion">Cheesehead Marathon</li>
        <div class="panel">
          <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <li class="accordion">Chain O'Lakes Marathon</li>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Fox Cities Marathon</li>
        <div class="panel">
          <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>
      </ul>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

只需像这样保持display:none

.panel{
display:none;
}

并使用id="pics"从主div 中删除class="panel"

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

.panel{
display:none;
}

<div id="header">
  <h1>Fox Valley Runners Club</h1>
</div>
<div id="main"></div>
<div id="pics">
  <div class="race_box">
    <img src="images/run1.jpg" id="5kpic" /><br />
    <figcaption>5k/10k Events</figcaption>
    <div class="races" id="5k">
      <h3>5k/10 Events</h3>
      <ul>
        <li class="accordion">Mini Sprint</li>
        <div class="panel">
          <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <li class="accordion">Iron Horse</li>
        <div class="panel">
          <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Twilight Trail</li>
        <div class="panel">
          <p>11/13/17, River's Edge Park, Wrightstown</p>
        </div>
      </ul>
    </div>
  </div>
  <div class="race_box">
    <img src="images/run2.jpg" id="halfpic" /></button><br />
    <figcaption>Half Marathon Events</figcaption>
    <div class="races" id="half">
      <h3>Half Marathon Events</h3>
      <ul>
        <li class="accordion">Fox River Marathon</li>
        <div class="panel">
          <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <li class="accordion">N.E.W. Half Marathon</li>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Winnebago Run</li>
        <div class="panel">
          <p>11/27/17, Menominee Park, Oshkosh</p>
        </div>
      </ul>
    </div>
  </div>
  <div class="race_box">
    <img src="images/run3.jpg" id="fullpic" /><br />
    <figcaption>Full Marathon Events</figcaption>
    <div class="races" id="full">
      <h3>Full Marathon Events</h3>
      <ul>
        <li class="accordion">Cheesehead Marathon</li>
        <div class="panel">
          <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <li class="accordion">Chain O'Lakes Marathon</li>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <li class="accordion">Fox Cities Marathon</li>
        <div class="panel">
          <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>
      </ul>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

你可以

(就像George Campbell说的那样(使用CSS而不是内联样式。为此，您应该将类添加到手风琴元素而不是样式中。例如，您具有以下结构：

   <ul>
      <li class="accordion">Fox River Marathon</li>
      <div class="panel">
        <p>10/15/17, Pierce Park, Appleton</p>
      </div>
   </ul>

相关的 CSS 可能是这样的：

.accordion + .panel:not(.active) {
  display: none;
}

现在，您可以像在代码中所做的那样切换类"活动"：

this.classList.toggle("active");

这可确保最初隐藏所有元素。如果要在触发手风琴后关闭所有其他元素，只需遍历所有手风琴元素并检查刚刚单击的元素是否与循环中的当前元素匹配，如果不是，则可以从中删除"active"类。

Answer 3

如前所述，通过 css 使面板默认不可见。

单击标题时，请检查是否获取了该类。如果是，请将其删除。如果没有，请从每个面板中删除该类，然后在面板上显式设置该类。

一些例子(不是最好的解决方案，但它会告诉你这个想法(：

var acc = document.getElementsByClassName("accordion");
var i
var panels = document.getElementsByClassName("panel");
var j;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var panel = this.nextElementSibling;
        if (panel.classList.contains("active")) {
            panel.classList.remove("active");
        } else {
            for (j = 0; j < panels.length; j++) {
                panels[j].classList.remove("active");
            }
            panel.classList.add("active");
        }
    }
}