Javascript 当两个下拉列表并排放置时，从下拉列表中选择一个值时，会将其向下推

下拉组件相邻渲染两次

当从下拉列表中选择一个项目时，将向下推整个下拉组件

我不知道为什么会发生这个问题。（我猜这可能是因为两个下拉列表之间缺少空间）

不知道如何解决这个问题

我已经把代码贴在下面了

函数下拉列表（）{
this.id=“”；
此参数为.items=[]；
此参数。设置={
isRendered:错，
isListOpen:错误
};
this.init=函数（componentId）{
this.id=组件id；
this.cacheDOM（）；
};
this.cacheDOM=函数（）{
this.$el=$（“#”+this.id）；
如果（此.settings.isRendered）
{
this.$input=this.$el.find（'input'）；
this.$dropbox=this.$el.find（'div'）；
this.$dropdownicon=this.$el.find（'span:first'）；
this.$ul=this.$el.find（'ul'）；
this.$li=this.$ul.find（'li'）；
}
此.template=`
进一步扩展

{{{#项目}
{{}}
{{/items}

`;
};
this.populateItems=函数（项）{
这个项目=项目；
这个。render（）；
};
this.applyStyles=函数（）{
变量elStyle={
“显示”：“内联块”，
'位置'：'相对'，
“padding”：“0”，
“边距”：“0”
};
var dropboxStyle={
“显示”：“内联flex”，
“边框”：“1px实心#9DD9D2”
};
变量输入样式={
'字体'：'继承'，
“填充”：“3px”，
“边框”：“无”
};
var inputFocusStyle={
“边界”：“无”，
“大纲”：“无”
};
var dropdownIconStyle={
“背景色”：“，
“颜色”：“Bebb”
};
var dropdownIconHoverStyle={
“游标”：“默认值”，
“背景色”：“9DD9D2”，
“颜色”：“白色”
};
这.$el.css（elStyle）；
这个.dropbox.css（dropboxStyle）；
这是.input.css（inputStyle）；
此.$input.on（'focus'，function（）{
$（this）.css（inputFocusStyle）；
});
这是$dropdownicon
.css（dropdownIconStyle）
.on（'mouseenter'，function（）{
$（this）.css（dropdowniconhorstyle）；
})
.on（'mouseleave'，function（）{
$（this）.css（dropdownIconStyle）；
});
};
this.bindEvents=函数（）{
this.$dropdownicon.on（'click'，this.toggleList.bind（this））；
this.li.on（'mouseenter'，this.toggleHoverItem.bind（this））.on（'mouseleave'，this.toggleHoverItem.bind（this））；
this.li.on（'click'，this.itemClickHandler.bind（this））；
};
this.itemClickHandler=函数（事件）{
var itemSelected=$（event.target）.closest（'li'）.text（）；
this.settings.isListOpen=！this.settings.isListOpen；
这个.ul.css（'display'，'none'）；
此.$input.val（itemSelected）；
}
this.toggleHoverItem=函数（事件）{
var itemMouseEnterStyle={
“背景色”：“9DD9D2”，
“颜色”：“白色”
}
var itemMouseLeaveStyle={
“背景色”：“白色”，
“颜色”：“黑色”
}
var backgroundColor=$（event.target）.closest（'li'）.css（“背景色”）；
如果（背景色=‘rgb（157、217、210）’）
$（event.target）.closest（'li'）.css（itemMouseLeaveStyle）；
其他的
$（event.target）.closest（'li'）.css（itemMouseEnterStyle）；
};
this.toggleList=函数（）{
var listOpenStyle={
'位置'：'绝对'，
“显示”：“块”，
“列表样式类型”：“无”，
“边框”：“1px实心#9DD9D2”，
“边距”：“0”，
“padding”：“2px2px2px2px”，
“左”：“0”，
“右”：“0”
}
变量listClosedStyle={
“显示”：“无”
}
this.settings.isListOpen=！this.settings.isListOpen；
if（this.settings.isListOpen）
这个.$ul.css（listOpenStyle）；
其他的
这个.ul.css（listClosedStyle）；
};
this.render=函数（）{
var data={items:this.items}；
this.$el.replaceWith（mustach.render（this.template，data））；
this.settings.isRendered=true；
this.cacheDOM（）；
这是applyStyles（）；
这是bindEvents（）；
};
};
var dropdown=新的dropdown（）；
下拉列表。init（‘城市’）；
下拉列表。人口项目（[‘慕尼黑’、‘奥斯陆’、‘哈瓦那’）；
dropdown.render（）；
var dropdown2=新的下拉列表（）；
下拉列表2.init（'city2'）；
下拉列表2.人口项目（[‘洛杉矶’、‘迈阿密’、‘爱丁堡’）；
dropdown2.render（）；

html，正文{
身高：100%；
宽度：100%；
溢出：隐藏；
字号：1em；
字体系列：“Lato”，无衬线；
}

---

尝试添加

垂直对齐：中间到id为“city”和“city2”的div


函数下拉列表（）{
this.id=“”；
此参数为.items=[]；
此参数。设置={
isRendered:错，
isListOpen:错误
};