Foundation - 下拉菜单 JavaScript 参考

Foundation 提供了如下列出的下拉菜单的 JavaScript 组件。

初始化

您可以使用 foundation.dropdownMenu.js 和 foundation.core.js 插件在 JavaScript 中初始化下拉菜单。该插件需要以下库 -

它指定如下定义的下拉菜单实例 -

var elem = new Foundation.DropdownMenu(element);

序号	名称和描述	类型
1	元素它创建一个 jQuery 对象到下拉菜单中。	jQuery
2	选项覆盖默认插件设置。	对象

序号

名称和描述

类型

元素

它创建一个 jQuery 对象到下拉菜单中。

jQuery

选项

覆盖默认插件设置。

对象

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

序号	名称和描述	示例
1	disableHover 禁用悬停事件打开子菜单。false	false
2	autoclose 当鼠标离开事件时，子菜单会自动关闭。	true
3	hoverDelay 它延迟在悬停事件上打开子菜单的时间。	50
4	clickOpen 允许子菜单在父级点击事件上保持打开状态。	true
5	closingTime 它延迟在鼠标离开事件上关闭子菜单的时间。	500
6	alignment 根据菜单，设置方向以打开子菜单。	'left'
7	closeOnClick 通过点击主体关闭打开的子菜单。	true
8	verticalClass 要设置菜单垂直，使用 vertical 类。	'vertical'
9	rightClass 将菜单设置在右侧。	'align-right'
10	forceFollow 强制布尔值执行默认操作以覆盖移动设备上第二次触摸事件的点击链接。	false

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

序号	名称和描述
1	show.zf.dropdown menus 当新的下拉窗格可见时，它会触发一个事件。
2	hide.zf.dropdown menus 当打开的菜单关闭时，它会触发一个事件。

序号

名称和描述

show.zf.dropdown menus

当新的下拉窗格可见时，它会触发一个事件。

hide.zf.dropdown menus

当打开的菜单关闭时，它会触发一个事件。

插件被销毁。

foundation_navigation.htm

打印页面