要默认打开手风琴部分，您需要为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>
所以我尝试使用js删除“is-active”类，以便折叠/关闭手风琴。但即使在“is-active”课程被删除后，手风琴也会保持开放状态。我应该如何通过单击按钮来折叠/关闭所有手风琴？
Here是Zurb Accordion的文档
这是我使用的脚本，（虽然我认为不相关）
$(document).ready(function(){
$(".testClass").click(function(){
$("li").removeClass("is-active");
});
});
答案 0 :(得分：3)
您可以按照以下方式执行此操作，运行代码段并查看其实际效果。
dlsalmonth_OnSelectedIndexChanged$(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));
});
});
}
答案 1 :(得分：0)
要添加到Jatin的答案，＆＃34;打开全部＆＃34;功能看起来像这样（除了＆＃39; up＆＃39; to＆＃39; down＆＃39;之外的另一个变化）：
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));
});
});
}
答案 2 :(得分：0)
我知道这有点晚了，但是我今天遇到了这个问题，并花了几个小时（在这个方面有点新），使用Jatin的代码创建了一个带有示例的CodePen。使用将展开或折叠的Javascript函数与不同手风琴的状态无关（如果存在打开/关闭的情况）。
作为参考，请参见此Codepen
$(document).foundation();
$(document).ready(function() {
$(".toggle-accordion").on("click", function() {
var accordionId = $(this).attr("accordion-id");
$(this).toggleClass("accordions-expanded");
triggerAccordions = document.querySelectorAll(".accordions-expanded");
if (triggerAccordions.length == 0) {
collapseAll();
} else {
expandAll();
}
});
});
function collapseAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("up", $(section));
});
});
};
function expandAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("down", $(section));
});
});
};body {
color: #6a6c6f;
background-color: #f1f3f6;
margin-top: 30px;
}
.container {
max-width: 960px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.accordion-option {
width: 100%;
float: left;
clear: both;
margin: 15px 0;
}
.accordion-option .title {
font-size: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
}
.accordion-option .toggle-accordion {
float: right;
font-size: 16px;
color: #6a6c6f;
}
.accordion-option .toggle-accordion:before {
content: "Expand All";
}
.accordion-option .toggle-accordion.accordions-expanded:before {
content: "Collapse All";
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.1.1/what-input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div class="container">
<div class="accordion-option">
<h2 class="title">Accordion Example</h2>
<a class="toggle-accordion accordions-expanded" accordion-id="#accordion"></a>
</div>
<br/>
<br/>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #1</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #2</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #3</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
</div>
祝大家好运。