[英]Zurb Foundation Accordion & Slick Slider not working together
[英]Zurb Foundation v5.5.3 accordion not working
我正在使用Foundation 5.5.3,并且尝试设置一个简单的手风琴。 我在docs( http://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html )中设置了所有内容
问题是:单击类别后,我可以看到不同类别获得了一个新的“活动”类别。 他们还获得aria-expanded =“ true”。 但是,它不会切换任何内容。 此外,当我第二次单击时,该类不会被删除,并且aria展开后的值保持等于“ 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/
任何帮助将不胜感激...我在论坛上发现的所有内容都无济于事...
看来您只是忘记将内容包装在列表中了。
<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>
上面的代码应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.