我正在使用基础5.5.3,我正在尝试设置一个简单的手风琴。我在文档(http://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html)
中设置了所有内容问题是:我可以看到不同的类别获得了一个新类"活跃"当我点击它们。他们也得到了aria-expanded =" true"。但是,它不会切换任何东西。此外,当我第二次点击时,该类不会被移除,并且咏叹调扩展等于" 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/
任何帮助都会得到很大的帮助......我在论坛上发现的一切都没有帮助......
答案 0 :(得分:0)
看起来您忘记将内容包装在列表中。
<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>
以上代码应该有效。