下拉菜单

JavaScript

下拉菜单是 Foundation 的三种菜单模式之一，它将一系列嵌套列表转换为垂直下拉菜单。

基础知识

下拉菜单使用标准的菜单语法，使用 <ul>、<li> 和 <a>。将 data-drilldown 添加到根菜单以设置下拉菜单。

要创建子菜单，请将 <ul> 放置在 <a> 的*旁边*。单击该 <a> 将打开它旁边的 <ul>。

任何没有子菜单的 <a> 都将像普通链接一样工作。

<ul class="vertical menu drilldown" data-drilldown>
  <li><a href="#">One</a></li>
  <li>
    <a href="#">Two</a>
    <ul class="menu vertical nested">
      <li><a href="#">Two A</a></li>
      <li><a href="#">Two B</a></li>
      <li><a href="#">Two C</a></li>
      <li><a href="#">Two D</a></li>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

下拉菜单的高度与其层次结构中最高菜单的高度相同，因此当用户浏览菜单时，菜单的高度不会发生变化。

自动高度

如果您想将高度设置为自动，您还可以设置 autoHeight 和 animateHeight 参数

观看此部分的视频

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->
</ul>

滚动到顶部下拉菜单

使用菜单后退按钮选择子菜单/返回导航时，滚动到菜单顶部。对于较长的菜单，这有助于提供更好的用户体验。

<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->
</ul>

自定义样式

下拉菜单插件会自动在每个嵌套菜单的顶部添加一个后退按钮。要为此控件设置样式，请定位 .js-drilldown-back 类

.js-drilldown-back {
  // ...
}

JavaScript 参考

初始化

以下文件必须包含在您的 JavaScript 中才能使用此插件

foundation.core.js
foundation.drilldown.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.nest.js
- 使用实用程序库 foundation.util.box.js

Foundation.Drilldown

创建一个下拉菜单的新实例。

var elem = new Foundation.Drilldown(element, options);

名称	类型	描述
`element`	jQuery	要转换为折叠菜单的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

插件选项

使用这些选项自定义下拉菜单的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-auto-apply-class`	`布尔值`	`true`	下拉菜单依赖于样式才能正常工作；在 Foundation 的默认构建中，这些样式位于 `drilldown` 类上。此选项在初始化时自动将此类应用于下拉菜单。
`data-back-button`	`字符串`	`<li class="js-drilldown-back"><a tabindex="0">返回</a></li>`	用于 JS 生成的后退按钮的标记。前置或追加（请参阅 backButtonPosition）到子菜单列表并在 `destroy` 方法上删除，需要 'js-drilldown-back' 类。如果复制和粘贴，请删除反斜杠 (`\`)。
`data-back-button-position`	`字符串`	`顶部`	将后退按钮放置在下拉子菜单的顶部或底部。可以是 `'left'` 或 `'bottom'`。
`data-wrapper`	`字符串`	`<div></div>`	用于包装下拉菜单的标记。为独立样式使用类名；需要应用 JS 的类：`is-drilldown`。如果复制和粘贴，请删除反斜杠 (`\`)。
`data-parent-link`	`布尔值`	`false`	将父链接添加到子菜单。
`data-close-on-click`	`布尔值`	`false`	允许菜单在单击正文时返回到根列表。
`data-auto-height`	`布尔值`	`false`	允许菜单自动调整高度。
`data-animate-height`	`布尔值`	`false`	对自动调整高度进行动画处理。
`data-scroll-top`	`布尔值`	`false`	打开子菜单或使用菜单后退按钮返回后，滚动到菜单顶部
`data-scroll-top-element`	`字符串`	`''`	从中获取 offset().top 的字符串 jquery 选择器（例如“body”），如果为空字符串，则获取下拉菜单 offset().top
`data-scroll-top-offset`	`数字`	`0`	ScrollTop 偏移量
`data-animation-duration`	`数字`	`500`	滚动动画持续时间
`data-animation-easing`	`字符串`	`swing`	滚动动画缓动。可以是 `'swing'` 或 `'linear'`。

事件

这些事件将从任何附加了下拉菜单插件的元素中触发。

名称	描述
`scrollme.zf.drilldown`	菜单滚动后触发
`close.zf.drilldown`	菜单关闭时触发。
`closed.zf.drilldown`	菜单完全关闭时触发。
`open.zf.drilldown`	子菜单打开时触发。
`hide.zf.drilldown`	子菜单关闭时触发。

方法

_scrollTop

$('#element').foundation('_scrollTop');

滚动到元素顶部或 data-scroll-top-element

触发以下事件： Drilldown#event:scrollme

_hideAll

$('#element').foundation('_hideAll');

关闭所有打开的元素，并返回根菜单。

触发以下事件： Drilldown#event:close Drilldown#event:closed

_back

$('#element').foundation('_back', $elem);

为每个“后退”按钮添加事件侦听器，并关闭打开的菜单。

触发以下事件： Drilldown#event:back

名称	类型	描述
`$elem`	jQuery	要添加“后退”事件的当前子菜单。

_showMenu

$('#element').foundation('_showMenu', $elem, autoFocus);

打开特定的下拉（子）菜单，而不管其中当前显示哪个（子）菜单。与 _show() 相比，这使您可以跳转到任何子菜单，而无需单击所有子菜单。

触发以下事件： Drilldown#event:open

名称	类型	描述
`$elem`	jQuery	目标（子）菜单（“ul”标签）
`autoFocus`	布尔值	如果为 true，则自动聚焦目标（子）菜单中的第一个链接

_show

$('#element').foundation('_show', $elem);

打开一个子菜单。

触发以下事件： Drilldown#event:open

名称	类型	描述
`$elem`	jQuery	要打开子菜单的当前元素，即“li”标签。

_hide

$('#element').foundation('_hide', $elem);

隐藏子菜单

触发以下事件： Drilldown#event:hide

名称	类型	描述
`$elem`	jQuery	要隐藏的当前子菜单，即“ul”标签。

_destroy

$('#element').foundation('_destroy');

销毁下拉菜单