- 基础通用
- 基础 - 全局样式
- 基础 - Sass
- 基础 - JavaScript
- 基础 - JavaScript 工具函数
- 基础 - 媒体查询
- 基础 - 网格系统
- 基础 - Flex 网格
- 基础 - 表单
- 基础 - 可见性类
- 基础 - 基本排版
- 基础 - 排版辅助类
- 基础 - 基本控件
- 基础 - 导航
- 基础 - 容器
- 基础 - 媒体
- 基础 - 插件
- 基础 SASS
- 基础 - Sass 函数
- 基础 - Sass 混合宏
- 基础库
- 基础 - Motion UI
下拉菜单面板 JavaScript 参考
Foundation 提供以下列出的下拉菜单面板的 JavaScript 组件。
初始化
您可以使用 foundation.dropdown.js 和 foundation.core.js 插件在 JavaScript 中初始化面板。foundation.core.js 插件需要以下库 -
foundation.util.keyboard.js
foundation.util.box.js
Foundation.Dropdown
它指定如下定义的下拉菜单实例 -
var my_element = new Foundation.Dropdown(element);
下拉菜单包含以下事件，如表中所列 -
| 序号 | 名称和描述 | 类型 |
|---|---|---|
| 1 |
元素 它创建一个 jQuery 对象到下拉菜单中。 |
jQuery |
| 2 |
选项 它覆盖默认的插件设置。 |
对象 |
插件选项
您可以使用以下插件选项来自定义下拉菜单实例。
| 序号 | 名称和描述 | 示例 |
|---|---|---|
| 1 |
hoverDelay 它指定在悬停事件上打开子菜单所需的时间。 |
250 |
| 2 |
hover 它在悬停事件上打开子菜单。 |
false |
| 3 |
hoverPane 当鼠标悬停在下拉菜单面板上时不会关闭下拉菜单 |
true |
| 4 |
vOffset 当您打开下拉菜单面板和触发元素时，它提供像素数。 |
1 |
| 5 |
hOffset 当您打开下拉菜单面板和触发元素时，它提供像素数。 |
1 |
| 6 |
positionClass 它用于在应用类以进行调整时调整位置。 |
'top' |
| 7 |
trapFocus 如果您使用键盘命令打开下拉菜单，此插件会将焦点锁定到下拉菜单面板。 |
false |
| 8 |
autoFocus 它用于将焦点设置到面板上的元素。 |
true |
事件
下拉菜单面板提供以下事件，如表中所列 -
| 序号 | 名称和描述 |
|---|---|
| 1 |
closeme.zf.dropdown 它用于关闭其他打开的下拉菜单。 |
| 2 |
show.zf.dropdown 当下拉菜单面板可见时，它显示下拉菜单面板。 |
函数
下拉菜单面板提供以下函数，如下所示 -
.getPositionClass - 它指定下拉菜单面板的当前位置。
.open - 它显示下拉菜单面板并触发通过冒泡事件关闭其他下拉菜单。
.close - 它关闭打开的下拉菜单面板。
.toggle - 它切换下拉菜单面板。
.destroy - 它销毁下拉菜单面板。