使JQuery下拉代码可重复使用

Question

I've found a drop down on Codrops that I'd like to use in my application - it's example #5 on this page: https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

I've popped it onto my page with the CSS and and the JS and it works and looks good etc, but when I've started to add another one and realized that it's not going to work because the code is engineered to only work for one drop down and to make it work for multiple I'd have to duplicate the JS code which I'm not keen to do and standards wise it's not the right way of doing it.

I'me just not sure how I can create something that will pass in the dropdowns and set click events for each of them as in production most of these boxes are going to come onto the page dynamically.

I've created a fiddle of the dropdown and the code I'm using here: https://jsfiddle.net/WebDevelopWolf/jou30bvg/

And the JS part of the code is (this is in the fiddle too):

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

All I did was to cut a bit from your code and it can be reused.

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


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

here Is a fiddle https://jsfiddle.net/jou30bvg/3/