原生js实现简洁的下拉菜单
Dette scriptet burde ikke installeres direkte. Det er et bibliotek for andre script å inkludere med det nye metadirektivet // @require https://update.greasyfork.org/scripts/463933/1177909/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 callback1');
},
shown: function(menu) {
console.log('After shown callback1');
},
hidden: function(menu) {
console.log('After hidden callback1');
}
});
