Foundation - Dropdown JavaScript 参考
Foundation 为下拉菜单提供 JavaScript 组件，如下所示。
初始化
您可以使用 foundation.dropdownMenu.js 和 foundation.core.js 插件在 JavaScript 中初始化下拉菜单。该插件需要以下库 −
foundation.util.keyboard.js
foundation.util.box.js
foundation.util.nest.js
Foundation.DropdownMenu
它指定了下拉菜单的实例，定义如下 −
var elem = new Foundation.DropdownMenu(element);
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
Element 它在下拉菜单中创建一个 jQuery 对象。 |
jQuery |
| 2 |
Options 默认插件设置是覆盖。 |
对象 |
插件选项
您可以使用以下插件自定义下拉菜单实例。您可以将插件选项设置为单独的数据属性。
| Sr.No. | 名称 &描述 | 示例 |
|---|---|---|
| 1 |
disableHover 禁用悬停事件打开子菜单。false |
false |
| 2 |
autoclose 当鼠标离开事件时，子菜单会自动关闭。 |
true |
| 3 |
hoverDelay 延迟悬停时打开子菜单的时间事件。 |
50 |
| 4 |
clickOpen 允许子菜单在父级点击事件中保持打开状态。 |
true |
| 5 |
closingTime 延迟在 mouseleave 事件中关闭子菜单的时间。 |
500 |
| 6 |
alignment 根据菜单，设置打开方向子菜单。 |
'left' |
| 7 | closeOnClick 单击主体即可关闭打开的子菜单。 |
true |
| 8 |
verticalClass 要将菜单设置为垂直，请使用类 vertical。 |
'vertical' |
| 9 |
rightClass 将菜单设置在右侧。 |
'align-right' |
| 10 |
forceFollow 要执行默认操作，强制布尔值覆盖移动设备上第二次触摸事件的点击链接。 |
false |
事件
附加到任何元素的下拉菜单插件都可以触发以下事件。
| Sr.No. | 名称和描述 |
|---|---|
| 1 |
show.zf.dropdown menus 当新的下拉窗格可见时，它会触发一个事件。 |
| 2 |
hide.zf.dropdown menus 当打开的菜单关闭时，它会触发一个事件。 |
函数
.destroy
插件已销毁。
foundation_navigation.html
