切換器

JavaScript Motion UI

切換器可輕鬆使用 CSS 或動畫在點擊時切換任何元素。

切換 CSS 類別

若要設定類別切換，請先將屬性 data-toggler 新增至元素。data-toggler 的值為您要切換的類別（例如 .classname 和 classname）。此外，請為元素提供一個唯一 ID，以便可以針對其進行目標設定。

在影片中觀看此部分

<ul class="menu" id="menuBar" data-toggler=".expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

然後，將 data-toggle 新增至任何元素，並將目標的 ID 設定為屬性的值。現在，任何時候您按一下此元素，類別都會在目標上開關。

<p><a data-toggle="menuBar">Expand!</a></p>

展開！

動畫切換

除了切換類別，您也可以切換可見性。當切換時，元素會使用 Motion UI 類別顯示或隱藏。

取代 data-toggler，新增屬性 data-animate。屬性的值是您想要的進入動畫，接著是離開動畫。

在影片中觀看此部分

<p><a data-toggle="panel">Toggle Panel</a></p>

<div class="callout" id="panel" data-toggler data-animate="hinge-in-from-top spin-out">
  <h4>Hello!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

切換面板

哈囉！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?

標示為可關閉

若要建立一個只能關閉一次的元素，請新增屬性 data-closable。接著使用 data-close 在元素內新增一個點擊觸發器。

在影片中觀看此部分

<div class="callout" data-closable>
  <button class="close-button" data-close>&times;</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.

搭配替換動畫

data-closable 可以設定為自訂離開動畫。

在影片中觀看此部分

<div class="callout" data-closable="slide-out-right">
  <button class="close-button" data-close>&times;</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore praesentium sint alias dolorum qui vel quaerat, libero consequatur non esse asperiores veritatis commodi, odit eum ipsam nemo dicta iste aliquam.</p>
</div>

聚焦時切換

data-toggle 屬性只會在點擊時切換類別/可見性。您也可以使用 data-toggle-focus，讓元素在取得焦點或失去焦點時觸發切換。

在影片中觀看此部分

<input type="text" data-toggle-focus="form-callout" placeholder="Click in here to reveal extra content">

<div class="secondary callout is-hidden" id="form-callout" data-toggler="is-hidden">
  <p>This is only visible when the above field has focus.</p>
</div>

只有在上方欄位取得焦點時，才會顯示此內容。

多個目標

data-toggle、data-close 和 data-open 屬性現在可以設定多個目標元素！語法很簡單，只要傳遞一個空白分隔的清單給 data-x 屬性，如下所示

在影片中觀看此部分

<button class="button" data-toggle="foo bar baz">Toggle things</button>

接著，當您按一下按鈕（或您選擇的任何其他元素）時，id 為 foo、bar 和 baz 的元素就會切換。

JavaScript 參考

初始化

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

foundation.core.js
foundation.toggler.js
- 搭配工具程式庫 foundation.util.motion.js
- 搭配工具程式庫 foundation.util.triggers.js

Foundation.Toggler

建立 Toggler 的新實例。

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

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

名稱	類型	說明
`element`	物件	要加入觸發器的 jQuery 物件。
`options`	物件	覆寫預設外掛設定。

外掛選項

使用這些選項自訂 Toggler 實例。外掛選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。進一步了解 JavaScript 外掛是如何初始化的。

名稱	類型	預設	說明
`data-toggler`	`字串`		要切換的元素類別。可以提供有或沒有「.」
`data-animate`	`布林值`	`false`	告訴外掛在切換時是否應對元素進行動畫處理。

事件

這些事件會從附加 Toggler 外掛的任何元素觸發。

名稱	說明
`on.zf.toggler`	如果目標元素在切換後有類別，則觸發。
`off.zf.toggler`	如果目標元素在切換後沒有類別，則觸發。

方法

toggle

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

在目標元素上切換目標類別。根據結果狀態是「開啟」或「關閉」，從原始觸發器觸發事件。

觸發這些事件： Toggler#event:on Toggler#event:off

_destroy

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

銷毀元素上的 Toggler 實例。