dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/dist/layui.js" charset="utf-8"></script> //这些特殊模块需单独在引入js文件,即引入dist文件夹下类库
即核心方法 dropdown.render(options) 中的 options 对应的参数：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 绑定触发组件的元素。必填项 | String/DOM | - |
| data | 菜单列数据项，其参数详见下文。必填项 | Array | [] |
| trigger | 触发组件的事件类型。支持所有事件，如：click/hover/mousedown/contextmenu 等 | String | click |
| show | 是否初始即显示组件面板 | Boolean | false |
| align | 下拉面板相对绑定元素的水平对齐方式（支持: left/center/right） v2.6.8 新增 | String | left |
| isAllowSpread | 是否允许菜单组展开收缩 | Boolean | true |
| isSpreadItem | 是否初始展开子菜单 | Boolean | true |
| delay | 延迟关闭的毫秒数。当 trigger 为 hover 时才生效 | Number | 300 |
| className | 自定义组件的样式类名 | String | - |
| style | 设置组件的 style 属性，从而定义新的样式 | String | - |
| templet | 全局定义菜单的列表模板，添加任意 html 字符，模版将被 laytpl 组件所转义，因此可通过 {{ d.title }} 的方式得到当前菜单配置的数据。#详见 | String | - |
| content | 自定义组件内容，从而替代默认的菜单结构 | String | - |
| ready | 组件成功弹出后的回调，并返回两个参数，如： ready: function(elemPanel, elem){
console.log(elemPanel); 得到组件面板的 DOM 对象
console.log(elem); 得到基础参数 elem 所绑定的元素 DOM 对象
}
|
Function | - |
| click | 菜单项被点击时的回调，并返回两个参数，如： click: function(data, othis){
console.log(data); 得到当前所点击的菜单项对应的数据
console.log(othis); 得到当前所点击的菜单项 DOM 对象
console.log(this.elem); //得到当前组件绑定的原始 DOM 对象，批量绑定中常用。
}
#详细使用参见下文 |
Function | - |
即上述基础参数 data 对应的参数，格式为：data: [{title: 'menu item 1', id: 1}, {}, {}]
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 菜单标题 | String | - |
| id | 菜单 ID。用户菜单项唯一索引 | Number/String | - |
| href | 菜单项的超链接地址。若填写，点击菜单将直接发生跳转。 | String | false |
| target | 菜单项超链接的打开方式，需 href 填写才生效。 一般可设为 _blank 或 _self 等 |
String | _self |
| type | 菜单项的类型，当前支持的值如下：
normal（默认） |
String | normal 或 不填 |
| child | 子级菜单数据项。参数同父级，可无限嵌套。 | Array | [] |
| templet | 自定义当前菜单项模板，优先级高于全局设定的 templet。详见下文。 | String | - |
该组件使用非常灵活，且弹出的面板进行了坐标的科学判断（基于内部的 lay.js 模块），能始终吸附显示在最佳的位置。
layui - 在每一个细节中，用心与你沟通
