Question

所以我在网上发现了这段代码，而不是基于代码来制作下拉菜单，以便更容易设计样式。

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

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

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

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

    $(document).click(function() {
        $('.wrapper-dropdown').removeClass('active');
    });

});

事情是我希望基于此有三个不同的下拉菜单，我想我可以这样：

var dd = new DropDown( $('#dd') );
var dd2 = new DropDown( $('#dd2') );
var dd3 = new DropDown( $('#dd3') );

好吧，当我在＃dd2或#dd3中选择某些内容时，它也会影响#dd。

Answer 1

好吧，在我看来，所有ul的.dropdown类都会导致问题。尝试修改它以设置不同的类，看看它是否有效。

Answer 2

您的代码和Google地图代码之间存在命名冲突。将班级名称从dropdown更改为其他任何内容（例如selectpicker）都可以解决问题。

下拉列表会影响其他下拉菜单

2 个答案: