如何使用ZURB Foundation折叠所有打开的手风琴6
要默认打开手风琴部分,需要为li标签添加“is-active”类。像这样:如何使用ZURB Foundation折叠所有打开的手风琴6
<li class="accordion-item is-active" data-accordion-item>
<a href="#0" class="accordion-title"><h5>This is the title</h5></a>
<div class="accordion-content" data-tab-content>
<p>This is the content
</p>
</li>
所以我试图删除“is-active”类,使用js以便手风琴将折叠/关闭。但即使在“主动”课被删除后,手风琴仍然保持开放状态。只需单击一下按钮,我应该如何折叠/关闭所有手风琴?
Here是Zurb手风琴
文档这里是我使用的脚本,(虽然我不认为它相关的)
$(document).ready(function(){
$(".testClass").click(function(){
$("li").removeClass("is-active");
});
});
你可以做到这一点,如下所示,运行段,并见它在行动中。
$(document).foundation();
function closeAll() {
$('.accroot').each(function() {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('up', $(section));
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.js"></script>
<button type="button" onclick="closeAll()"> Close All </button>
<ul class="accordion accroot" data-accordion data-allow-all-closed='true'>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
它完美的工作!感谢那个Jatin! ,你能否帮助我澄清在关闭手风琴时应该打开哪一部分,以便我可以创建某种开关切换。 :) –
嗨@BaimHK,要关闭所有的手风琴,换''$ acc.foundation('up',$(section));''''acc.foundation('down',$(section));' –
为了增加Jatin的回答, “打开所有” 的功能看起来像这样(另外一个变化,除了 '上' 到 '下'):
function openAll() {
$('.accroot').each(function() {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('down', $(section));
});
});
}
我尝试了Jatin提供的所有开放解决方案,但它的工作原理非常好,谢谢!我想你会删除“.is-active”,并将“up”改为“down”:) –
当我看ZURB基金会的文件,我看到有属性“data-allow-all-closed =”true“”命名。您可以尝试将此添加为jQuery的一个属性。 –