メニュー

任意のボタンにドロップダウンリストを追加します。`data-target` 属性が`<ul>`タグのidと一致することを確認してください。`<li class="divider"></li>`タグを使用して区切り線を追加できます。アイコンを追加することもできます。アイコンを`アンカー`タグ内に追加するだけです。

ドロップダウンを開く！ 


  <!-- Dropdown Trigger -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });

  // Or with jQuery

  $('.dropdown-trigger').dropdown();

オプション

名前 タイプ デフォルト 説明
alignment（配置） 文字列 'left' メニューの配置する端を定義します。
autoTrigger（自動トリガー） ブール値 true trueの場合、キーボードでドロップダウン要素に自動的にフォーカスします。
constrainWidth（幅の制限） ブール値 true trueの場合、ドロップダウントリガーのサイズに幅を制限します。
container（コンテナ） 要素 null ドロップダウンのバウンディングコンテナとなる要素を指定します。
coverTrigger（トリガーを覆う） ブール値 true falseの場合、ドロップダウンはトリガーの下に表示されます。
closeOnClick（クリックで閉じる） ブール値 true trueの場合、項目をクリックするとドロップダウンが閉じます。
hover（ホバー） ブール値 false trueの場合、ドロップダウンはホバー時に開きます。
inDuration（表示時間） 数値 150 ミリ秒単位での表示アニメーション時間。
outDuration（非表示時間） 数値 250 ミリ秒単位での非表示アニメーション時間。
onOpenStart（表示開始時） 関数 null ドロップダウンが表示を開始したときに呼び出される関数。
onOpenEnd（表示終了時） 関数 null ドロップダウンが表示を完了したときに呼び出される関数。
onCloseStart（非表示開始時） 関数 null ドロップダウンが非表示を開始したときに呼び出される関数。
onCloseEnd（非表示終了時） 関数 null ドロップダウンが非表示を完了したときに呼び出される関数。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。


    var instance = M.Dropdown.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.dropdown-trigger').dropdown('methodName');
      $('.dropdown-trigger').dropdown('methodName', paramName);
    */
.open();

ドロップダウンを開きます。


  instance.open();

.close();

ドロップダウンを閉じます。


  instance.close();

.recalculateDimensions();

ドロップダウンが開いている間、内容が変更された場合は、そのサイズを再計算できます。


  instance.recalculateDimensions();

.destroy();

プラグインインスタンスを破棄し、終了します。


  instance.destroy();

プロパティ

名前 タイプ 説明
el 要素 プラグインが初期化されたDOM要素。
options オブジェクト インスタンスが初期化されたオプション。
id 文字列 ドロップダウン要素のID。
dropdownEl 要素 ドロップダウンのDOM要素。
isOpen ブール値 ドロップダウンが開いているかどうか。
isScrollable ブール値 ドロップダウンの内容がスクロール可能かどうか。
focusedIndex 数値 フォーカスされている項目のインデックス。