Zurb Foundation v5.5.3 手风琴不工作答案

【问题标题】：Zurb Foundation v5.5.3 accordion not workingZurb Foundation v5.5.3 手风琴不工作
【发布时间】：2016-02-11 16:05:41
【问题描述】：

我正在使用 Foundation 5.5.3，我正在尝试设置一个简单的手风琴。我设置了文档中的所有内容 (http://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html)

问题是：当我点击它们时，我可以看到不同的类别获得了一个“活跃”的新类。他们也得到 aria-expanded="true"。但是，它不会切换任何东西。此外，当我第二次单击时，该类不会被删除，并且 aria-expanded 保持等于“true”。

这是我的html：

<ul class="accordion" id="myAccordion" data-accordion>
  <li class="accordion-navigation"><a href="#cat1">Cat 1</a></li>
  <div id="cat1" class="content active">
    <ul>
      <li><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
      <li><a href="#">Item C</a></li>
      <li><a href="#">Item D</a></li>
    </ul>
  </div>
  <li class="accordion-navigation"><a href="#cat2">Cat 2</a></li>
  <div id="cat2" class="content">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</ul>

这是我的带有控制台输出的 js：

$(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
});
$('#myAccordion').on('toggled', function (event, accordion) {
  console.log(accordion);
});

这是我的小提琴：https://jsfiddle.net/gfm1ssLa/2/

任何帮助将不胜感激...我在论坛上找到的所有内容都无济于事...

【问题讨论】：

标签： jquery accordion zurb-foundation-5

【解决方案1】：

您似乎只是忘记将内容包含在列表中。

<ul class="accordion" id="myAccordion" data-accordion>
  <li class="accordion-navigation"><a href="#cat1">Cat 1</a>
    <div id="cat1" class="content active">
      <ul>
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li><a href="#">Item C</a></li>
        <li><a href="#">Item D</a></li>
      </ul>
    </div>
  </li>
  <li class="accordion-navigation"><a href="#cat2">Cat 2</a>
    <div id="cat2" class="content">
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </div>
  </li>
</ul>

上面的代码应该可以工作。

【讨论】：