如何使用ZURB Foundation折叠所有打开的手风琴6

Question

要默认打开手风琴部分，需要为li标签添加“is-active”类。像这样：

<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"); 
    }); 
}); 

Answer 1

你可以做到这一点，如下所示，运行段，并见它在行动中。

$(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>

Answer 2

为了增加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)); 
    }); 
    }); 
}