使JQuery下拉代码可重复使用

Question

我找到了要在我的应用程序中使用的Codrops的下拉列表-此页面上的示例＃5： https : //tympanus.net/codrops/2012/10/04/custom-drop-down-列表样式/

我已经使用CSS和JS将其弹出到页面上，并且可以正常工作，但是看起来不错，但是当我开始添加另一个时，我意识到它不起作用，因为代码被设计为仅适用于一个下拉列表并使其适用于多个应用程序，我必须复制我不愿做的JS代码，并且从标准的角度来看，这不是正确的做法。

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

我已经创建了下拉菜单和此处使用的代码的小提琴： https : //jsfiddle.net/WebDevelopWolf/jou30bvg/

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

Answer 1

我所做的只是从您的代码中减少了一点，可以重复使用。

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


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

这是一个小提琴https://jsfiddle.net/jou30bvg/3/