鑽探式選單

JavaScript

鑽探式選單是 Foundation 三種選單模式之一，可將一系列巢狀清單轉換為垂直的鑽探式選單。

基礎知識

鑽探式選單使用標準的選單語法，使用 <ul>、<li> 和 <a>。將 data-drilldown 加入根選單以設定鑽探式選單。

若要建立子選單，請在 <a> 旁邊放置一個 <ul>。然後，按一下該 <a> 將會開啟它旁邊的 <ul>。

任何沒有子選單的 <a> 都會像一般連結一樣運作。

<ul class="vertical menu drilldown" data-drilldown>
  <li><a href="#">One</a></li>
  <li>
    <a href="#">Two</a>
    <ul class="menu vertical nested">
      <li><a href="#">Two A</a></li>
      <li><a href="#">Two B</a></li>
      <li><a href="#">Two C</a></li>
      <li><a href="#">Two D</a></li>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

鑽探式選單會採用階層中最高選單的高度，因此當使用者瀏覽選單時，選單的高度不會改變。

autoHeight

如果您想將高度設為自動，您也可以設定 autoHeight 和 animateHeight 參數

在影片中觀看此部分

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->
</ul>

ScrollTop 鑽孔

在使用選單返回按鈕選擇子選單/導航返回時，捲動至選單頂端。對於較長的選單來說，這可以提供更好的使用者體驗。

<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->
</ul>

自訂樣式

鑽孔外掛程式會自動將返回按鈕新增到每個巢狀選單的頂端。若要設定此控制項的樣式，請設定 .js-drilldown-back 類別的目標

.js-drilldown-back {
  // ...
}

JavaScript 參考

初始化

您的 JavaScript 中必須包含下列檔案才能使用此外掛程式

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

Foundation.Drilldown

建立鑽孔選單的新執行個體。

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

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

外掛程式選項

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

名稱	類型	預設	說明
`data-auto-apply-class`	`布林值`	`true`	鑽孔依賴樣式才能正常運作；在 Foundation 的預設建置中，這些樣式在 `drilldown` 類別上。此選項會在初始化時自動將此類別套用至鑽孔。
`data-back-button`	`字串`	`<li class="js-drilldown-back"><a tabindex="0">返回</a></li>`	用於 JS 產生的返回按鈕的標記。加到子選單清單之前或之後 (請參閱 backButtonPosition)，並在 `destroy` 方法中刪除，需要 'js-drilldown-back' 類別。複製和貼上時，請移除反斜線 (`\`)。
`data-back-button-position`	`字串`	`頂端`	將返回按鈕置於向下展開子選單的頂部或底部。可以是 `'left'` 或 `'bottom'`。
`data-wrapper`	`字串`	`<div></div>`	用於包覆向下展開選單的標記。使用類別名稱進行獨立樣式設定；JS 套用類別：`is-drilldown` 是必需的。如果複製和貼上，請移除反斜線 (`\`)。
`data-parent-link`	`布林值`	`false`	將父層連結新增至子選單。
`data-close-on-click`	`布林值`	`false`	允許選單在點選主體時返回至根目錄清單。
`data-auto-height`	`布林值`	`false`	允許選單自動調整高度。
`data-animate-height`	`布林值`	`false`	自動調整高度的動畫。
`data-scroll-top`	`布林值`	`false`	在開啟子選單或使用選單返回按鈕返回後，捲動至選單頂端
`data-scroll-top-element`	`字串`	`''`	元素的 jQuery 選擇器字串（例如 'body'），用於取得 offset().top，如果為空字串，則取得向下展開選單的 offset().top
`data-scroll-top-offset`	`number`	`0`	ScrollTop 偏移量
`data-animation-duration`	`number`	`500`	捲動動畫持續時間
`data-animation-easing`	`字串`	`swing`	捲動動畫緩動。可以是 `'swing'` 或 `'linear'`。

事件

這些事件將從附加了向下展開選單外掛程式的任何元素觸發。

名稱	說明
`scrollme.zf.drilldown`	在選單捲動後觸發
`close.zf.drilldown`	在選單關閉時觸發。
`closed.zf.drilldown`	在選單完全關閉時觸發。
`open.zf.drilldown`	在子選單開啟時觸發。
`hide.zf.drilldown`	在子選單關閉時觸發。

方法

_scrollTop

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

捲動至元素頂端或 data-scroll-top-element

觸發這些事件： Drilldown#event:scrollme

_hideAll

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

關閉所有開啟的元素，並返回至根目錄選單。

觸發這些事件： Drilldown#event:close Drilldown#event:closed

_back

$('#element').foundation('_back', $elem);

為每個 back 按鈕新增事件監聽器，並關閉開啟的選單。

觸發這些事件： Drilldown#event:back

名稱	類型	說明
`$elem`	jQuery	要新增 `back` 事件的目前子選單。

_showMenu

$('#element').foundation('_showMenu', $elem, autoFocus);

開啟特定的向下展開（子）選單，不論目前哪個（子）選單可見。與 _show() 相比，這讓您跳至任何子選單，而不用點選途中的每個子選單。

觸發這些事件： Drilldown#event:open

名稱	類型	說明
`$elem`	jQuery	目標（子）選單（`ul` 標籤）
`autoFocus`	布林值	如果為 true，目標（子）選單中的第一個連結會自動對焦

_show

$('#element').foundation('_show', $elem);

開啟子選單。

觸發這些事件： Drilldown#event:open

名稱	類型	說明
`$elem`	jQuery	具有要開啟之子選單的目前元素，即 `li` 標籤。

_hide

$('#element').foundation('_hide', $elem);

隱藏子選單

觸發這些事件： Drilldown#event:hide

名稱	類型	說明
`$elem`	jQuery	要隱藏的目前子選單，即 `ul` 標籤。

_destroy

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

銷毀 Drilldown 選單