javascript - 如何使用 ZURB Foundation 6 折叠所有打开的 Accordion

Question

要默认打开 Accordion 部分，您需要为 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”类，以便 Accordion 折叠/关闭。但即使在删除“is-active”类之后， Accordion 仍保持打开状态。我应该如何通过单击按钮折叠/关闭所有 Accordion ？

Here是 Zurb Accordion 的文档

这是我使用的脚本，(虽然我认为它不相关)

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