向任何按钮添加下拉列表。确保 data-target 属性与 <ul> 标记中的 id 匹配。你可以使用 <li class="divider"></li> 标记添加分隔线。你还可以添加图标。只需在 anchor 标记中添加图标即可。

放下我！

• 一
• 二
• 三
• view_module四
• cloud五

  <!-- 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，则将 constrainWidth 约束为下拉激活器的尺寸。
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	数字	聚焦项的索引。