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

所以我尝试使用 js 删除“is-active”类，以便手风琴折叠/关闭。但即使在“is-active”类被删除后，手风琴仍然保持打开状态。我应该如何通过单击一个按钮来折叠/关闭所有手风琴？

Here 是 Zurb Accordion 的文档

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

    $(document).ready(function(){
    $(".testClass").click(function(){
        $("li").removeClass("is-active");
    });
});

Answer 1

我知道这有点晚了，但是我今天遇到了这个问题，在花了几个小时之后（这有点新），我使用 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>

祝大家好运。

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

Answer 3

您可以按照以下方式进行操作，运行 sn-p 并查看它的实际效果。

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