javascript - 使 JQuery 下拉代码可重用

Question

我在 Codrops 上找到了一个下拉列表，我想在我的应用程序中使用它 - 这是本页上的示例 #5:https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

我已经用 CSS 和 JS 将它弹出到我的页面上，它可以工作并且看起来不错等，但是当我开始添加另一个并意识到它不会工作，因为代码被设计为只适用于一个下拉菜单，要使其适用于多个下拉菜单，我必须复制 JS 代码，但我不喜欢这样做，而且从标准 Angular 来看，这不是正确的做法。

我只是不确定如何创建一些可以传入下拉列表并为每个下拉列表设置点击事件的内容，因为在生产中大多数这些框都会动态地出现在页面上。

我创建了一个下拉列表和我在这里使用的代码:https://jsfiddle.net/WebDevelopWolf/jou30bvg/

代码的 JS 部分是(这也在 fiddle 中):

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            event.stopPropagation();
        }); 
    }
}

$(function() {
    var dd = new DropDown( $('#dd') );
    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-5').removeClass('active');
    });
});

Answer 1

我所做的只是从您的代码中删除一些内容，然后它就可以重用了。

function DropDown(el) {
    el.on('click', function(event){
      $(this).toggleClass('active');
      event.stopPropagation();
    }); 
}


new DropDown( $('#dd') );

这里是一个 fiddle https://jsfiddle.net/jou30bvg/3/