在按钮上添加下拉列表。确保 data-target属性和 <ul>标签的id属性相匹配. 你可以添加一个分割线通过 <li class="divider"></li>标签。你可以添加一个图标，只需要把图标添加到 anchor标签里面。

下拉

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

  <!-- 下拉列表触发器 -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>下拉</a>

  <!-- 下拉列表结构 -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">一</a></li>
    <li><a href="#!">二</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">三</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>四</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>五</a></li>
  </ul>
        

初始化

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

  // 或使用jQuery

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

选项

名称	类型	默认	描述
alignment	String	'left'	定义菜单的对齐方式
autoTrigger	Boolean	true	如果是true， 自动将焦点放在下拉按钮上
constrainWidth	Boolean	true	如果是true， 将宽度约束为下拉按钮大小
container	Element	null	提供一个元素，该元素将成为下拉列表的边界容器。
coverTrigger	Boolean	true	如果是false，下拉列表将显示在触发器下方。
closeOnClick	Boolean	true	如果是true，单击项目时关闭下拉列表。
hover	Boolean	false	如果是true， 悬停时下拉列表将打开。
inDuration	Number	150	过渡效果的持续时间以毫秒为单位输入。
outDuration	Number	250	向外过渡效果的持续时间（以毫秒为单位）。
onOpenStart	Function	null	当下拉列表开始进入时调用的函数。
onOpenEnd	Function	null	当下拉列表完成进入时调用的函数。
onCloseStart	Function	null	当下拉菜单开始退出时调用的函数。
onCloseEnd	Function	null	当下拉列表退出时调用函数。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

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

    /* JQuery方法调用
      您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

      $('.dropdown-trigger').dropdown('方法名称');
      $('.dropdown-trigger').dropdown('方法名称', 参数名称);
    */
          

.open();

打开下拉列表

  instance.open();
        

.close();

关闭下拉列表

  instance.close();
        

.recalculateDimensions();

当下拉列表处于打开状态时，如果其内容发生了更改，则可以重新计算其尺寸。

  instance.recalculateDimensions();
        

.destroy();

销毁插件实例并回收。

  instance.destroy();
        

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
id	String	下拉列表组件元素的ID。
dropdownEl	Element	下拉列表组件的DOM元素。
isOpen	Boolean	下拉列表是否是打开的。
isScrollable	Boolean	下拉内容是否可滚动的。
focusedIndex	Number	下拉列表选中项的索引