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

Question

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

<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" class，这样手风琴就会 collapse/close。但即使在删除 "is-active" class 之后，手风琴仍保持打开状态。我应该如何 collapse/close 一键点击所有手风琴？

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>

Answer 2

为了补充 Jatin 的答案，"Open all" 函数看起来像这样（除了 'up' 到 'down' 之外的另一个变化）：

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

Answer 3

我知道这有点晚了，但我今天遇到了这个问题，在花了几个小时（这方面有点新）之后，我使用 Jatin 的代码创建了一个带有示例的 CodePen。使用 Javascript 函数，无论不同手风琴的状态如何，它都会展开或折叠（如果有 open/closes 的混合）。

参考这个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>

祝大家好运。

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

How to collapse all opened accordion using ZURB Foundation 6

html

javascript

jquery

accordion

zurb-foundation