手風琴功能表

JavaScript

使用手風琴功能表外掛程式，將基本垂直功能表變更為可展開的手風琴功能表。

基礎

手風琴功能表遵循 <ul>、<li> 和 <a> 的基本功能表語法。若要將基本功能表轉換為手風琴，請新增屬性 data-accordion-menu。您可能也希望它是垂直的，因此也新增類別 .vertical。

任何 <a> 都會像標準連結一樣運作。但是，任何與巢狀 <ul> 功能表配對的 <a> 都會在點選時向上和向下滑動該子功能表。

在影片中觀看此部分

您可以使用內建的 .nested 類別，為巢狀功能表新增縮排。

若要在頁面載入時已開啟子功能表，請將類別 .is-active 新增至該子功能表。

<ul class="vertical menu accordion-menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

子選單切換

手風琴選單可以有獨立的子選單切換。這允許父項目有自己的連結，但仍允許子選單開啟/關閉。您需要新增類別 accordion-menu 以及資料屬性 data-submenu-toggle="true" 才能正確運作。

<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
  <li>
    <a href="https://foundation.dev.org.tw/" target="_blank">Link here, dropdown there →</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

Sass 參考

變數

這個元件的預設樣式可以使用這些 Sass 變數在您專案的設定檔中自訂。

名稱	類型	預設值	說明
`$accordionmenu-padding`	數字	`$global-menu-padding`	設定手風琴選單內距。
`$accordionmenu-nested-margin`	數字	`$global-menu-nested-margin`	設定手風琴選單巢狀邊界
`$accordionmenu-submenu-padding`	數字	`$accordionmenu-padding`	設定手風琴選單子選單內距。
`$accordionmenu-arrows`	布林值	`true`	設定手風琴選單是否有預設箭頭樣式。
`$accordionmenu-arrow-color`	顏色	`$primary-color`	如果使用箭頭，設定手風琴選單箭頭顏色。
`$accordionmenu-item-background`	顏色	`null`	設定手風琴選單項目內距。
`$accordionmenu-border`	顏色	`null`	設定手風琴選單項目邊框。
`$accordionmenu-submenu-toggle-background`	顏色	`null`	設定手風琴選單項目內距。
`$accordion-submenu-toggle-border`	清單	`$accordionmenu-border`	設定手風琴選單項目內距。
`$accordionmenu-submenu-toggle-width`	數字	`40px`	設定手風琴選單子選單切換背景寬度。
`$accordionmenu-submenu-toggle-height`	數字	`$accordionmenu-submenu-toggle-width`	設定手風琴選單子選單切換背景高度。
`$accordionmenu-arrow-size`	長度	`6px`	如果使用箭頭，設定手風琴選單箭頭大小。

JavaScript 參考

初始化

您的 JavaScript 必須包含以下檔案才能使用這個外掛程式

foundation.core.js
foundation.accordionMenu.js
- 包含工具程式庫 foundation.util.keyboard.js
- 包含工具程式庫 foundation.util.nest.js

Foundation.AccordionMenu

建立手風琴選單的新執行個體。

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

觸發這些事件： AccordionMenu#event:init

名稱	類型	說明
`element`	jQuery	要製作成手風琴選單的 jQuery 物件。
`options`	物件	覆寫預設外掛程式設定。

外掛程式選項

使用這些選項來自訂手風琴選單的執行個體。外掛程式選項可以設定為個別資料屬性、一個組合的 data-options 屬性，或作為傳遞給外掛程式建構函式的物件。深入了解如何初始化 JavaScript 外掛程式。

名稱	類型	預設	說明
`data-parent-link`	`布林值`	`false`	將父層連結加入子選單。
`data-slide-speed`	`數字`	`250`	以毫秒為單位，開啟子選單的動畫時間。
`data-submenu-toggle`			加入一個獨立的子選單切換按鈕。這允許父層項目擁有連結。
`data-submenu-toggle-text`			如果啟用，用於子選單切換的文字。這僅用於螢幕朗讀程式。
`data-multi-open`	`布林值`	`true`	允許選單有多個開啟的面板。

事件

這些事件會從附加手風琴選單外掛程式的任何元素觸發。

名稱	說明
`down.zf.accordionMenu`	當選單開啟完成時觸發。
`up.zf.accordionMenu`	當選單收合完成時觸發。

方法

hideAll

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

關閉選單的所有面板。

showAll

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

開啟選單的所有面板。

toggle

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

切換子選單的開啟/關閉狀態。

名稱	類型	說明
`$target`	jQuery	要切換的子選單

down

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

開啟由 $target 定義的子選單。

觸發這些事件： AccordionMenu#event:down

名稱	類型	說明
`$target`	jQuery	要開啟的子選單。

up

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

關閉由 $target 定義的子選單。目標內的所有子選單也會關閉。

觸發這些事件： AccordionMenu#event:up

名稱	類型	說明
`$target`	jQuery	要關閉的子選單。

_destroy

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

銷毀手風琴選單的執行個體。

觸發這些事件： AccordionMenu#event:destroyed