MyDropdown

原生js实现简洁的下拉菜单

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greasyfork.org/scripts/463933/1177909/MyDropdown.js

سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.

ئاپتورى: wish king
نەشرى: 0.0.1.20230419042947
قۇرۇلغان ۋاقتى: 2023-04-13
يېڭىلانغان ۋاقتى: 2023-04-19
Size: 16.4 KB
ئىجازەتنامىسى: يوق

原生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');
    }
});