Zurb Foundation v5.5.3 手风琴不工作
Zurb Foundation v5.5.3 accordion not working
我正在使用 foundation 5.5.3,我正在尝试设置一个简单的手风琴。我像文档中那样设置所有内容 (http://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html)
问题是:当我点击不同的类别时,我可以看到它们得到一个新的 class "active"。他们也得到 aria-expanded="true"。但是,它不会切换任何东西。此外,当我第二次单击时,不会删除 class 并且 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);
});
这是我的fiddle: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>
上面的代码应该可以工作。
我正在使用 foundation 5.5.3,我正在尝试设置一个简单的手风琴。我像文档中那样设置所有内容 (http://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html)
问题是:当我点击不同的类别时,我可以看到它们得到一个新的 class "active"。他们也得到 aria-expanded="true"。但是,它不会切换任何东西。此外,当我第二次单击时,不会删除 class 并且 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);
});
这是我的fiddle: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>
上面的代码应该可以工作。