下拉列表

优质

小牛编辑

140浏览

2023-12-01

增加下拉列表在到按钮上，确保 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');