Javascript:第一个下拉框工作，另一个是n't.代码是一样的
Javascript: First drop-down box working yet other one isn't. Code is the same
我想有九个下拉框，但目前只有两个。问题是，除了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>请添加窗口。在单个函数中加载函数的代码与下面相同，或者您只需替换它正在工作的脚本代码
window.addEventListener('mouseup', function (event) {
"use strict";
var rightdropdown = document.getElementById('right_side_dropdown_content');
var rightdropdownbuttontoggle = document.getElementById('right_side_button');
var middropdown = document.getElementById('mid_side_dropdown_content');
var middropdownbuttontoggle = document.getElementById('mid_side_button');
if (event.target !== rightdropdown) {
rightdropdown.style.display = 'none';
}
else if (event.target !== middropdown) {
middropdown.style.display = 'none';
}
});
window.onload = function () {
"use strict";
var rightbutton = document.getElementById('right_side_button');
var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
var midbutton = document.getElementById('mid_side_button');
var middropdowncontent = document.getElementById('mid_side_dropdown_content');
document.onclick = function (e) { /* creating function "e" */
if (e.target === rightbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
rightdropdowncontent.style.display = 'block';
}
else if (e.target === midbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
middropdowncontent.style.display = 'block';
}
};
};
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var rightdropdown = document.getElementById('right_side_dropdown_content');
var middropdown = document.getElementById('mid_side_dropdown_content');
if (event.target !== middropdown) {
middropdown.style.display = 'none';
}
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');
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');
document.onclick = function (e) { /* creating function "e" */
if (e.target === rightbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
rightdropdowncontent.style.display = 'block';
}
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">
<article id="mid_section">
<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>当你点击右边，因为你有两个窗口。加载功能只用于中间按钮功能。然后在相同的加载函数中编写中间按钮下面的右键代码单一窗口。加载包含两个按钮点击事件的函数
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';
}
};
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.onload分配不同的函数。当你分配两个功能时，第二个功能正在工作。
查看以下链接
为window.onload添加两个函数
相关文章：
- Dijkstra's”;针对GOTO声明的案件“;与函数一样适用于现代调用代码的命名封装
- 我如何才能让我的代码像在jsfiddle中一样工作
- 如何像HTML编辑器一样自动为代码着色
- 使用 JS 插入代码，就像 php 中的 echo 一样
- 如何获取html元素运行时代码以生成通用副本?就像复制文本框中输入文本一样
- Clojuescrapt ajax.core没有单独的处理程序/回调，代码中的流非常精确，就好像代码是同步的一样
- 在函数中运行代码，就好像它在另一个作用域中运行一样
- Android的PhoneGap加速度计应用程序像疯了一样滞后，什么'我的代码错了
- 在javascript中，如何用更少的代码创建多个克隆，就像jQuery中的clone(）方法一样
- 如何在网站中像字符串一样显示html代码和javascript
- WebStorm中的代码完成，就像Visual Studio的ReSharper一样
- 如何在javascript中制作自己的字符串，就像我在键盘上点击ALT代码一样(UTF-8)
- Jquery代码像媒体屏幕一样工作
- Javascript:第一个下拉框工作，另一个是n't.代码是一样的
- 在javascript代码库中需要*.web.js(就像我们需要*.js文件一样)
- 就像Javascript的初学者一样，我试图创建一个代码来允许对象在y轴和x轴上上下移动
- Jquery延迟像警告框一样停止代码
- 如何在html javascript中为Instagram制作自定义共享按钮代码，就像Pinterest一样
- 导航条在bootstrap中工作在移动设备上的4个页面中的2个.代码对所有人都是一样的
- 像JQuery一样把整个代码放在一起
