如何使用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)); 
    }); 
    }); 
}