原生js实现简洁的下拉菜单
Versão de:
Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://updategf.qytechs.cn/scripts/463933/1175338/MyDropdown.js
原生js实现简洁的下拉菜单
截图：
在线预览：
https://jsrun.net/3cdKp/embedded/all/light
使用示例：
var clicked = function(e) {
console.log("clicked", e.target.dataset.value)
}
new MyDropdown({
el: ".my-dropdown-btn",
maxWidth: '200px',
maxHeight: '400px',
//支持click mouseenter dblclick等，默认click
toggleEvent: 'mouseenter',
items: [
{
name: 'Home',
value: 'home',
icon: '',
fn: clicked
},
{
name: 'About',
value: 'about',
icon: '',
selected: false,
fn: clicked
},
{
name: 'Contact',
value: 'contact',
icon: '',
fn: clicked,
//icon也支持对象传值，同样具有html和fn属性
op: {
html: `×`,
fn: function(e) {
console.log('op clicked');
}
}
}
],
created: function(menu) {
console.log('After created callback');
},
shown: function(menu) {
console.log('After shown callback');
},
hidden: function(menu) {
console.log('After hidden callback');
}
});