Foundation - 钻取式菜单 JavaScript 参考

Foundation 提供了用于钻取式菜单的 JavaScript 组件，如下所示。

初始化

您可以使用 foundation.drilldown.js 和 foundation.core.js 插件在 JavaScript 中初始化钻取式菜单。该插件需要以下库：

foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.nest.js

Foundation.Drilldown

它指定了如下定义的钻取式菜单实例：

var elem = new Foundation.Drilldown(element);

序号	名称和描述	类型
1	element 它将 jQuery 对象创建为一个钻取式菜单。	jQuery
2	options 覆盖默认插件设置。	对象

序号

名称和描述

类型

element

它将 jQuery 对象创建为一个钻取式菜单。

jQuery

options

覆盖默认插件设置。

对象

插件选项

您可以使用以下插件自定义钻取式菜单实例。您可以将插件选项设置为单独的数据属性。

序号	名称和描述	示例
1	backButton 需要 js-drilldown-back 类。对于 JS 生成的后退按钮，使用标记。	<\li><\a>Back<\/a><\/li>
2	wrapper 需要 is-drilldown 类以进行独立的样式设置。	<\div class = "is-drilldown"><\/div>
3	closeOnClick 点击主体可以帮助菜单返回到根列表。	false

序号

名称和描述

示例

backButton

需要 js-drilldown-back 类。对于 JS 生成的后退按钮，使用标记。

<\li><\a>Back<\/a><\/li>

wrapper

需要 is-drilldown 类以进行独立的样式设置。

<\div class = "is-drilldown"><\/div>

closeOnClick

点击主体可以帮助菜单返回到根列表。

false

事件

附加到任何元素的钻取式菜单插件可以触发以下事件。

序号	名称和描述
1	closed.zf.drilldown menu 当菜单完全关闭时触发事件。
2	hide.zf.drilldown menus 当打开的子菜单关闭时触发事件。

序号

名称和描述

closed.zf.drilldown menu

当菜单完全关闭时触发事件。

hide.zf.drilldown menus

当打开的子菜单关闭时触发事件。

函数

以下是钻取式菜单中使用的函数。

._hideAll

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

._back

每个 back 按钮中都包含事件侦听器。

序号	名称和描述	类型
1	$elem back 事件包含在当前子菜单中。	jQuery

序号

名称和描述

类型

$elem

back 事件包含在当前子菜单中。

jQuery

._show

子菜单打开。

序号	名称和描述	类型
1	$elem 打开当前子菜单。	jQuery

序号

名称和描述

类型

$elem

打开当前子菜单。

jQuery

._hide

子菜单隐藏。

序号	名称和描述	类型
1	$elem 隐藏当前子菜单	jQuery

序号

名称和描述

类型

$elem

隐藏当前子菜单

jQuery

.destroy

销毁钻取式菜单。

foundation_navigation.htm

打印页面