负载时折叠手风琴

Question

我试图让我的手风琴项目在页面加载时不可见。我希望它们仅在单击时才可见，并且当单击其他项目时希望该项目消失。我尝试了一些不同的选项，似乎无法让它发挥作用。请参阅下面的代码..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

最初只需保留display:none

.panel{
display:none;
}

并使用class="panel"

从主div中删除id="pics"

＆＃13;

＆＃13;

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

＆＃13;

.panel{
display:none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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