Foundation for Sites6.8.1 更新日志
组件列表

折叠面板

JavaScript

折叠面板是帮助您在一个容器中组织和导航多个文档的元素。它们可用于在容器中的项目之间切换。

基础知识

折叠面板的容器需要类 .accordion 和属性 data-accordion。请注意，在这些示例中，我们使用 <ul>，但您可以使用任何您想要的元素。

<ul class="accordion" data-accordion></ul>

在折叠面板内部，放置一系列带有类 .accordion-item 和属性 data-accordion-item 的窗格。要标记默认情况下应打开哪个窗格，请将类 .is-active 添加到该窗格。

每个窗格都有一个**标题**，一个带有类 .accordion-title 的 <a>，以及一个**内容区域**，一个带有类 .accordion-content 和属性 data-tab-content 的元素。

在视频中观看此部分

edit on codepen button 
<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <!-- ... -->
</ul>

一旦你把它们放在一起，这就是你得到的！

高级选项

多重展开

默认情况下，折叠面板一次只能打开一个窗格。可以通过将 multiExpand 选项设置为 true 来更改此设置。

在视频中观看此部分

edit on codepen button 
<ul class="accordion" data-accordion data-multi-expand="true">
  <!-- ... -->
</ul>

全部关闭

默认情况下，折叠面板中至少有一个窗格必须打开。可以通过将 allowAllClosed 选项设置为 true 来更改此设置。

在视频中观看此部分

edit on codepen button 
<ul class="accordion" data-accordion data-allow-all-closed="true">
  <!-- ... -->
</ul>

禁用

有时您可能希望在折叠面板上禁用窗格切换。这可以通过设置 disabled 选项来实现。

`disabled` 选项将禁用折叠面板的所有上、下和切换方法。如果您希望使用 JavaScript 操作禁用的折叠面板，则需要从折叠面板中删除 `disabled` 选项。

<ul class="accordion" data-accordion disabled>
  <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. I'm open because I'm loaded that way, but you can't close me
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2, you can't open me.</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, you can't open me.</a>
    <div class="accordion-content" data-tab-content>
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

折叠面板和 URL

浏览器历史记录

当 data-deep-link 选项设置为 true 时，折叠面板的当前状态将通过在折叠面板打开时向浏览器 URL 添加带有折叠面板 ID 的哈希值来记录。默认情况下，折叠面板*替换*浏览器历史记录（使用 history.replaceState()）。使用属性 data-update-history="true" 修改此行为，以*追加*到浏览器历史记录（使用 history.pushState()）。在后一种情况下，浏览器后退按钮将跟踪打开折叠面板的每次点击。

通过使用深度链接（见下文），可以通过复制粘贴浏览器 URL 来共享页面选项卡集的打开状态。

深度链接

将属性 data-deep-link="true" 添加到折叠面板以

  • 在单击折叠面板时修改浏览器历史记录
  • 允许用户在页面加载时使用附加哈希值的 URL 打开特定的折叠面板
<ul class="accordion" data-accordion data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" id="deeplinked-accordion">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#deeplink1" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content id="deeplink1">
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#deeplink2" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content id="deeplink2">
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#deeplink3" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content id="deeplink3">
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

例如，https://example.com/#deeplink3 将在页面加载时打开第三个折叠面板。此示例将打开一个新的浏览器选项卡，并将您滚动到打开的折叠面板。

当直接链接到折叠面板时，内容出现在折叠面板中可能并不明显。另一个属性 data-deep-link-smudge 在深度链接（到水平折叠面板）后稍微向上滚动页面，以便折叠面板位于视口的顶部。

<ul class="accordion" data-deep-link="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="600" data-accordion id="deeplinked-accordion-with-smudge">

    Sass 参考

    变量

    可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

    名称类型默认值描述
    $accordion-background 颜色 $white

    折叠面板组的默认背景颜色。
    $accordion-plusminus 布尔值 true

    如果为 true，则在每个折叠面板标题的侧面添加加号和减号图标。
    $accordion-plus-content 字符串 '\002B'

    当 $accordion-plusminus 为 true 时加号图标的内容
    $accordion-minus-content 字符串 '\2013'

    当 $accordion-plusminus 为 true 时减号图标的内容
    $accordion-title-font-size 数字 rem-calc(12)

    折叠面板标题的字体大小。
    $accordion-item-color 颜色 $primary-color

    菜单中项目的默认文本颜色。
    $accordion-item-background-hover 颜色 $light-gray

    菜单中项目悬停时的默认背景颜色。
    $accordion-item-padding 数字或列表 1.25rem 1rem

    折叠面板项目的默认填充。
    $accordion-content-background 颜色 $white

    选项卡内容的默认背景颜色。
    $accordion-content-border 颜色 1px solid $light-gray

    选项卡内容的默认边框颜色。
    $accordion-content-color 颜色 $body-font-color

    选项卡内容的默认文本颜色。
    $accordion-content-padding 数字或列表 1rem

    选项卡内容的默认填充。

    混合

    我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建您自己的类结构。

    accordion-container

    @include accordion-container;

    添加折叠面板容器的样式。将此应用于获取 data-accordion 的相同元素。

    accordion-item

    @include accordion-item;

    添加折叠面板项目的样式。将此应用于折叠面板 ul 中的列表项。

    accordion-title

    @include accordion-title;

    添加折叠面板项目标题的样式。将此应用于折叠面板项目中的链接。

    accordion-content

    @include accordion-content;

    添加折叠面板内容的样式。将此应用于折叠面板项目标题下方的内容窗格。

    JavaScript 参考

    初始化

    必须在您的 JavaScript 中包含以下文件才能使用此插件

    • foundation.core.js
    • foundation.accordion.js
      • 使用实用程序库 foundation.util.keyboard.js

    Foundation.Accordion

    创建折叠面板的新实例。

    var elem = new Foundation.Accordion(element, options);

    **触发以下事件：** Accordion#event:init

    名称类型描述
    元素 jQuery 要转换为折叠面板的 jQuery 对象。
    选项 对象 一个带有设置的普通对象，用于覆盖默认选项。

    插件选项

    使用这些选项来自定义折叠面板的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

    名称 类型 默认 描述
    data-slide-speed 数字 250 动画打开折叠面板窗格所需的时间。
    data-multi-expand 布尔值 false 允许折叠面板具有多个打开的窗格。
    data-allow-all-closed 布尔值 false 允许折叠面板关闭所有窗格。
    data-deep-link 布尔值 false 将位置哈希链接到打开的窗格。更改打开的窗格时设置位置哈希，并在位置更改时打开并滚动到相应的窗格。
    data-deep-link-smudge 布尔值 false 如果启用了 `deepLink`，则调整深度链接滚动以确保折叠面板的顶部可见
    data-deep-link-smudge-delay 数字 300 如果启用了 `deepLinkSmudge`，则深度链接调整的动画时间（毫秒）
    data-deep-link-smudge-offset 数字 0 如果启用了 `deepLinkSmudge`，则 scrollToTtop 的偏移量以防止页面顶部粘性元素重叠
    data-update-history 布尔值 false 如果启用了 `deepLink`，则使用打开的折叠面板更新浏览器历史记录

    事件

    这些事件将从附加了折叠面板插件的任何元素触发。

    名称描述
    deeplink.zf.accordion 当插件在页面加载时进行深度链接时触发
    down.zf.accordion 选项卡完成打开时触发。
    up.zf.accordion 选项卡完成折叠时触发。

    方法

    toggle

    $('#element').foundation('toggle', $target);

    切换所选内容窗格的打开/关闭状态。

    名称类型描述
    $target jQuery 要切换的窗格的 jQuery 对象（`.accordion-content`）。

    down

    $('#element').foundation('down', $target);

    打开由 $target 定义的折叠面板选项卡。

    **触发以下事件：** Accordion#event:down

    名称类型描述
    $target jQuery 要打开的折叠面板窗格（`.accordion-content`）。

    up

    $('#element').foundation('up', $target);

    关闭由 $target 定义的选项卡。如果折叠面板选项不允许，则可以忽略它。

    **触发以下事件：** Accordion#event:up

    名称类型描述
    $target jQuery 关闭手风琴标签 (`.accordion-content`)。

    _destroy

    $('#element').foundation('_destroy');

    销毁手风琴的一个实例。

    触发以下事件： Accordion#event:destroyed