Question

我已经在Codrops上找到了我想要在我的应用程序中使用的内容 - 这是本页的第5页示例：https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

我已经使用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/

使JQuery下载代码可重用

1 个答案: