手風琴

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 的元素。

觀看影片中的這部分

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

將所有部分組合在一起後，您將會看到以下內容！

手風琴 1

面板 1. Lorem ipsum dolor
無處可去
手風琴 2
手風琴 3
輸入您的姓名！

進階選項

多重展開

預設情況下，一次只能開啟手風琴的一個窗格。這可以透過將 multiExpand 選項設定為 true 來變更。

觀看影片中的這部分

<ul class="accordion" data-accordion data-multi-expand="true">
  <!-- ... -->
</ul>

手風琴 1
面板 1. Lorem ipsum dolor
手風琴 2
面板 2. Lorem ipsum dolor
手風琴 3
面板 3. Lorem ipsum dolor

全部關閉

預設情況下，手風琴中至少必須開啟一個窗格。這可以透過將 allowAllClosed 選項設定為 true 來變更。

觀看影片中的這部分

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

手風琴 1
面板 1. Lorem ipsum dolor
手風琴 2
面板 2. Lorem ipsum dolor
手風琴 3
面板 3. Lorem ipsum dolor

停用

有時您可能想要停用手風琴上的窗格切換。這可以透過設定 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>

手風琴 1
面板 1. 我已經開啟，因為我是這樣載入的，但您無法關閉我
手風琴 2，您無法開啟我。
面板 2. Lorem ipsum dolor
手風琴 3，您無法開啟我。
面板 3. Lorem ipsum dolor

手風琴和 URL

瀏覽器記錄

當 data-deep-link 選項設定為 true 時，手風琴的目前狀態會透過在手風琴開啟時將包含手風琴面板 ID 的雜湊新增到瀏覽器 URL 中來記錄。預設情況下，手風琴會取代瀏覽器記錄（使用 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>

手風琴 1
面板 1. Lorem ipsum dolor
手風琴 2
面板 2. Lorem ipsum dolor
手風琴 3
面板 3. Lorem ipsum dolor

例如，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

名稱	類型	描述
`element`	jQuery	要轉換成手風琴的 jQuery 物件。
`options`	物件	一個用於覆寫預設選項的純粹物件。

外掛程式選項

使用這些選項自訂 Accordion 的執行個體。外掛程式選項可以設定為個別資料屬性，一個合併的 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`，使用開啟的手風琴更新瀏覽器歷程記錄

事件

這些事件會從附加了 Accordion 外掛程式的任何元素觸發。

名稱	描述
`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