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

问题描述 投票：1回答：3

要默认打开手风琴部分，您需要为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");
    });
});
javascript jquery html zurb-foundation accordion
3个回答
3
投票

您可以按照以下方式执行此操作，运行代码段并查看其运行情况。

$(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>
0
投票

为了增加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));
    });
  });
}
0
投票

我知道这有点晚了，但是我今天遇到了这个问题，在花了几个小时之后（对此有点新的），使用Jatin的代码我创建了一个带有示例的CodePen。使用将扩展或折叠的Javascript函数与不同的Accordions的状态无关（如果有混合打开/关闭）。

供参考，请参阅此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>

祝大家好运。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.