Javascript 使JQuery下拉代码可重用

我发现了一个我想在我的应用程序中使用的Codrops下拉列表-这是本页的示例5：

我用CSS和JS将它弹出到我的页面上，它工作正常，看起来不错等等，但是当我开始添加另一个代码时，我意识到它不起作用，因为代码被设计成只在一个下拉列表中工作，并使其在多个下拉列表中工作，我不得不复制JS代码，这是我不热衷于做的，从标准上看，这不是正确的方法

我只是不知道我如何才能创建一些东西，将通过在下拉列表中，并设置点击事件，因为在生产中，这些框中的大多数将动态出现在页面上

我已经创建了一个下拉列表和我在这里使用的代码：

代码中的JS部分也是这样的：

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

---

我所做的只是从你的代码中删去一点，这样它就可以被重用了

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


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

这是一把小提琴

---

在html中，ID是uniq，如果使用ID生成下拉列表，则只使用第一个元素。然后使用一个类来标识所有下拉列表或创建具有不同ID的不同下拉列表。