【发布时间】：2016-11-15 10:18:15
【问题描述】：
我想要九个下拉框，但目前只有两个。问题是它们中只有一个在工作，但是除了 HTML 不同部分的 ID 明显变化之外，它们的代码是相同的。 当我单击第一个（“mid_side_button”）时，它可以完美运行并显示使用 CSS 创建的内容。当我单击另一个按钮（“right_side_button”）时，它什么也不做。
这是包含相关部分的相关 Javascript 和 HTML 元素。
请不要太在意CSS，仅供参考。
如果需要任何进一步的信息，请回复。
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var rightdropdown = document.getElementById('right_side_dropdown_content');
var rightdropdownbuttontoggle = document.getElementById('right_side_button');
if (event.target !== rightdropdown) {
rightdropdown.style.display = 'none';
}
});
window.onload = function () {
"use strict";
var rightbutton = document.getElementById('right_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === rightbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
rightdropdowncontent.style.display = 'block';
}
};
};
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var middropdown = document.getElementById('mid_side_dropdown_content');
var middropdownbuttontoggle = document.getElementById('mid_side_button');
if (event.target !== middropdown) {
middropdown.style.display = 'none';
}
});
window.onload = function () {
"use strict";
var midbutton = document.getElementById('mid_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var middropdowncontent = document.getElementById('mid_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === midbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
middropdowncontent.style.display = 'block';
}
};
};.individual_left_side_links{
margin: 0px;
margin-right: 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow: auto;
width: 300px;
}
#vehicle_3_header{
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
width: 300px;
float: right;
border-bottom: 2px solid black;
}
.compare_sections_titles{
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 0px;
}
#right_section{
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 0px;
float: right;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
width: 300px;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow:auto;
}
#right_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#right_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#right_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#right_side_dropdown_content a:hover {
background-color: #f1f1f1;
}
#mid_section{
margin: 5px;
float: left;
width: 320px;
text-align: left;
padding-left: 10px;
padding-right: 10px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
box-shadow: 1px 1px 2px 2px #888;
}
#mid_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#mid_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#mid_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#mid_dropdown_text{
color: white;
text-align:center;
}
#mid_side_dropdown_content a:hover {
background-color: #f1f1f1
}<div id="mid_container">
<header id="container_top_padder">
<li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
</header>
<article id="left_section">
<nav id="left_side_nav">
<li><a class="individual_left_side_links">Cars</a></li>
<li><a class="individual_left_side_links">Bikes</a></li>
<li><a class="individual_left_side_links">Trucks</a></li>
</nav>
</article>
<article id="mid_section">
<p>Title</p>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
<button id="mid_side_button">Make</button>
<div id="mid_side_dropdown_content">
<p><a class="mid_dropdown_text" href="#">Link 1</a></p>
<p><a class="mid_dropdown_text" href="#">Link 2</a></p>
<p><a class="mid_dropdown_text" href="#">Link 3</a></p>
</div>
</article>
<header id="vehicle_3_header">
<h3 class="compare_sections_titles">Vehicle 3</h3>
</header>
<article id="right_section">
<button id="right_side_button">Make</button>
<div id="right_side_dropdown_content">
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
</div>
</article>
</div>
<script type="text/javascript" src="Test3Javascript.js"></script>
</body>
</html>【问题讨论】：
标签： javascript jquery html css