mirror of
https://gitee.com/layui/layui.git
synced 2025-10-07 23:24:32 +08:00
1670cbab8f
* refactor: 重构 dropdown 打开与关闭逻辑 * chore: 优化变量 * refactor: 保留采用 elem 的 jQuery Data 进行面板打开状态的判断 * fix: 优化延时移除面板时的实例不一致的问题
2.7 KiB
2.7 KiB
下拉菜单
下拉菜单
可以绑定任意元素，
比如这段文字
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}],
click: function(obj){
this.elem.find('span').text(obj.title);
}
});
// 绑定输入框
dropdown.render({
elem: '#ID-dropdown-demo-base-input',
closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
data: [{
title: 'menu item 1',
id: 101
},{
title: 'menu item 2',
id: 102
},{
title: 'menu item 3',
id: 103
},{
title: 'menu item 4',
id: 104
},{
title: 'menu item 5',
id: 105
},{
title: 'menu item 6',
id: 106
}],
click: function(obj){
this.elem.val(obj.title);
},
style: 'min-width: 235px;'
});
// 绑定文字
dropdown.render({
elem: '#ID-dropdown-demo-base-text',
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101,
child: [{ // 横向子菜单
title: 'menu item 2-1',
id: 1011
},{
title: 'menu item 2-2',
id: 1012
}]
},{
title: 'menu item 3',
id: 102
},{
type: '-' // 分割线
},{
title: 'menu group',
id: 103,
type: 'group', // 纵向菜单组
child: [{
title: 'menu item 4-1',
id: 1031
},{
title: 'menu item 4-2',
id: 1032
}]
},{
type: '-' // 分割线
},{
title: 'menu item 5',
id: 104
},{
title: 'menu item 5',
id: 104
}],
click: function(obj){
this.elem.val(obj.title);
}
});
});
</script>