介绍

增加下拉列表在到按钮上，确保data-activates属性匹配<ul>标签的id

你可以增加分隔线通过<li class="divider"></li>标签。

单击我

• 一
• 二
• 三

  <!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>单击我</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">一</a></li>
    <li><a href="#!">二</a></li>
    <li class="divider"></li>
    <li><a href="#!">三</a></li>
  </ul>
        

选项

选项名称	描述
induration	下拉列表显示转换的时间（毫秒）。 默认: 300
outduration	下拉列表隐藏转换的时间（毫秒）。 默认: 225
constrainwidth	如果是true，限制下拉列表的宽度。 默认: true
hover	如果为true，悬浮显示下拉列表。默认: false
gutter	定义距离边缘的空隙。 默认: 0
beloworigin	如果是true，下拉列表在触发的下方显示。默认: false
alignment	定义菜单的对齐方式。默认: 'left'
stoppropagation	如果是true，停止响应单击引起的下拉事件。 默认: false

要使用这些内联，你必须将它们添加为数据属性。如果你想要更多的动态控制，你可以使用下面的jQuery插件定义。

  <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
        

jQuery插件初始化

如果你想动态的创建下拉列表，初始化时必须的。

  $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );
        

你也可以通过程序打开下拉菜单，下面的代码可以使下拉列表展开:

  $('.dropdown-button').dropdown('open');
        

你也可以通过程序关闭下拉菜单:

  $('.dropdown-button').dropdown('close');