javascript - 当 2 个下拉菜单并排放置时，从下拉菜单中选择一个值会将其下推

Question

下拉组件相邻呈现两次。

当从下拉列表中选择一个元素时，整个下拉组件被下推。

我不确定为什么会出现此问题。 (我猜这可能是因为 2 个下拉菜单之间没有空间)。

不知道如何解决这个问题。

我已经发布了下面的代码。

function Dropdown() {
					this.id = '';
					this.items = [];
					
					this.settings = {
					    isRendered: false,
						isListOpen: false
					};
					
					this.init = function(componentId) {
						     this.id = componentId;
					         this.cacheDOM();						     
					};
					
					this.cacheDOM = function() {
						          this.$el = $('#' + this.id);
						
						          if (this.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');
						          }
						
						          this.template = `<div id='`+ this.id +`'>
			                                           <div class='dropbox'><input /><span class='material-icons'>expand_more</span></div>
                                                       <ul style='display: none'>
                                                           {{#items}}
                                                           <li>{{.}}</li>
                                                           {{/items}}
			                                           </ul>
			                                      </div>`;
					};
					
					this.populateItems = function(items) {
						              this.items = items;
						              this.render();
					};
					
					this.applyStyles = function() {
						
						 var elStyle = {
							'display': 'inline-block',
							'position': 'relative',
							'padding': '0',
							'margin': '0'
						 };
						 
						 var dropboxStyle = {
							 'display' : 'inline-flex',
							 'border' : '1px solid #9DD9D2'
						 };
						 
						 var inputStyle = {
							 'font': 'inherit',
							 'padding': '3px',
							 'border': 'none'
						 };
						
						 var inputFocusStyle = {
							 'border': 'none',
							 'outline': 'none'
						 };
						
						var dropdownIconStyle = {
							  'background-color': '',
						      'color': '#17BEBB'
						};
						
						var dropdownIconHoverStyle = {
							 'cursor': 'default',
							 'background-color': '#9DD9D2',
                             'color': 'white'
						};
						
						
						
                        this.$el.css(elStyle);
					    this.$dropbox.css(dropboxStyle);
						this.$input.css(inputStyle);
						this.$input.on('focus', function() {
							$(this).css(inputFocusStyle);
						});
						this.$dropdownicon
					    .css(dropdownIconStyle)
						.on('mouseenter', function() {
							$(this).css(dropdownIconHoverStyle);
						})
						.on('mouseleave', function() {
							$(this).css(dropdownIconStyle);
						});
					};
					
					this.bindEvents = function() {
						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 = function(event) {
						var itemSelected = $(event.target).closest('li').text();
						this.settings.isListOpen = !this.settings.isListOpen;
						this.$ul.css('display', 'none');						
						this.$input.val(itemSelected);
					}
					
					this.toggleHoverItem = function(event) {
						
						var itemMouseEnterStyle = {
							'background-color': '#9DD9D2',
							'color': 'white'
						}
						
						var itemMouseLeaveStyle = {
							'background-color': 'white',
							'color': 'black'
						}
						
						var backgroundColor = $(event.target).closest('li').css( "background-color" );
						
						if(backgroundColor == 'rgb(157, 217, 210)')
						  $(event.target).closest('li').css(itemMouseLeaveStyle);
						else
                          $(event.target).closest('li').css(itemMouseEnterStyle);
					};
					
					this.toggleList = function() {
						var listOpenStyle = {
							'position': 'absolute',
							'display': 'block',
							'list-style-type': 'none',
							'border' : '1px solid #9DD9D2',
							'margin': '0',
							'padding': '2px 2px 2px 2px',
							'left': '0',
							'right': '0'
						}
						
						var listClosedStyle = {
							'display': 'none'
						}
						
						this.settings.isListOpen = !this.settings.isListOpen;
						
						if(this.settings.isListOpen)
						   this.$ul.css(listOpenStyle);
						else
						   this.$ul.css(listClosedStyle);
					};
					
					this.render = function() {
						     var data = {items: this.items};
						     this.$el.replaceWith(Mustache.render(this.template, data));
						     this.settings.isRendered = true;
						     this.cacheDOM();
						     this.applyStyles();
						     this.bindEvents();
					};
					
				};

			var dropdown = new Dropdown();
				dropdown.init('city');
				dropdown.populateItems(['Munich', 'Oslo', 'Havana']);
				dropdown.render();
			
			var dropdown2 = new Dropdown();
				dropdown2.init('city2');
				dropdown2.populateItems(['Los Angeles', 'Miami', 'Edinburg']);
				dropdown2.render();
		

	html, body {
                height: 100%;
                width: 100%;
                overflow: hidden;
                font-size: 1em;
                font-family: 'Lato', sans-serif;
            }

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		
		<span id='city'></span>
		<span id='city2'></span>
		
		        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

	</body>
</html>

Answer 1

尝试将 vertical-align:middle; 添加到 ID 为“city”和“city2”的 div

function Dropdown() {
					this.id = '';
					this.items = [];
					
					this.settings = {
					    isRendered: false,
						isListOpen: false
					};
					
					this.init = function(componentId) {
						     this.id = componentId;
					         this.cacheDOM();						     
					};
					
					this.cacheDOM = function() {
						          this.$el = $('#' + this.id);
						
						          if (this.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');
						          }
						
						          this.template = `<div id='`+ this.id +`'>
			                                           <div class='dropbox'><input /><span class='material-icons'>expand_more</span></div>
                                                       <ul style='display: none'>
                                                           {{#items}}
                                                           <li>{{.}}</li>
                                                           {{/items}}
			                                           </ul>
			                                      </div>`;
					};
					
					this.populateItems = function(items) {
						              this.items = items;
						              this.render();
					};
					
					this.applyStyles = function() {
						
						 var elStyle = {
							'display': 'inline-block',
							'position': 'relative',
							'padding': '0',
							'margin': '0','vertical-align':'middle',
						 };
						 
						 var dropboxStyle = {
							 'display' : 'inline-flex',
							 'border' : '1px solid #9DD9D2'
						 };
						 
						 var inputStyle = {
							 'font': 'inherit',
							 'padding': '3px',
							 'border': 'none'
						 };
						
						 var inputFocusStyle = {
							 'border': 'none',
							 'outline': 'none'
						 };
						
						var dropdownIconStyle = {
							  'background-color': '',
						      'color': '#17BEBB'
						};
						
						var dropdownIconHoverStyle = {
							 'cursor': 'default',
							 'background-color': '#9DD9D2',
                             'color': 'white'
						};
						
						
						
                        this.$el.css(elStyle);
					    this.$dropbox.css(dropboxStyle);
						this.$input.css(inputStyle);
						this.$input.on('focus', function() {
							$(this).css(inputFocusStyle);
						});
						this.$dropdownicon
					    .css(dropdownIconStyle)
						.on('mouseenter', function() {
							$(this).css(dropdownIconHoverStyle);
						})
						.on('mouseleave', function() {
							$(this).css(dropdownIconStyle);
						});
					};
					
					this.bindEvents = function() {
						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 = function(event) {
						var itemSelected = $(event.target).closest('li').text();
						this.settings.isListOpen = !this.settings.isListOpen;
						this.$ul.css('display', 'none');						
						this.$input.val(itemSelected);
					}
					
					this.toggleHoverItem = function(event) {
						
						var itemMouseEnterStyle = {
							'background-color': '#9DD9D2',
							'color': 'white'
						}
						
						var itemMouseLeaveStyle = {
							'background-color': 'white',
							'color': 'black'
						}
						
						var backgroundColor = $(event.target).closest('li').css( "background-color" );
						
						if(backgroundColor == 'rgb(157, 217, 210)')
						  $(event.target).closest('li').css(itemMouseLeaveStyle);
						else
                          $(event.target).closest('li').css(itemMouseEnterStyle);
					};
					
					this.toggleList = function() {
						var listOpenStyle = {
							'position': 'absolute',
							'display': 'block',
							'list-style-type': 'none',
							'border' : '1px solid #9DD9D2',
							'margin': '0',
							'padding': '2px 2px 2px 2px',
							'left': '0',
							'right': '0'
						}
						
						var listClosedStyle = {
							'display': 'none'
						}
						
						this.settings.isListOpen = !this.settings.isListOpen;
						
						if(this.settings.isListOpen)
						   this.$ul.css(listOpenStyle);
						else
						   this.$ul.css(listClosedStyle);
					};
					
					this.render = function() {
						     var data = {items: this.items};
						     this.$el.replaceWith(Mustache.render(this.template, data));
						     this.settings.isRendered = true;
						     this.cacheDOM();
						     this.applyStyles();
						     this.bindEvents();
					};
					
				};

			var dropdown = new Dropdown();
				dropdown.init('city');
				dropdown.populateItems(['Munich', 'Oslo', 'Havana']);
				dropdown.render();
			
			var dropdown2 = new Dropdown();
				dropdown2.init('city2');
				dropdown2.populateItems(['Los Angeles', 'Miami', 'Edinburg']);
				dropdown2.render();
		

	html, body {
                height: 100%;
                width: 100%;
                overflow: hidden;
                font-size: 1em;
                font-family: 'Lato', sans-serif;
            }

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		
		<span id='city'></span>
		<span id='city2'></span>
		
		        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

	</body>
</html>