多个下拉菜单都链接回一个
[英]Multiple drop-down menus are all linking back to one
问题描述
I'm a complete beginner at HTML, CSS, and JS, so forgive me. 
我是HTML，CSS和JS的完整入门者，请原谅。 Right now this is what I have (sorry for the length and mess): 现在，这就是我所拥有的（抱歉，长度和混乱情况）：
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: auto;
border: 0px solid transparent;
background-color: transparent;
outline: 0px solid black;
outline-offset: 0px;
width: 800px;
height:
}
div.ex2 {
margin: auto;
border: 0px solid transparent;
background-color: transparent;
outline: 1px dashed #1e58b4;
outline-offset: 25px;
width:680px;
height:
}
div.ex3 {
margin: auto;
border: 0px solid transparent;
background-color: transparent;
outline: 0px dashed #1e58b4;
outline-offset: 25px;
width:730px;
height:
}
</style>
</head>
<style>
.dropbtn {
background-color: #2b89c6;
color: white;
padding: 4px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2b89c6;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
font-size: 12px;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
</style>
</head>
<body>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
<body>
<font face="courier">
<br>
<div class="ex1"><font color="black"><center><font size="2.5pt">============================================================================================<br><font size="6.5pt"><big><font color="#1e58b4">Header Header Header</font></big></font></font></font><br><font color="black"><center><font size="2.5pt">============================================================================================<!--SCIENCE--></font></font><br><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> Science </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div></div> <!--ENGLISH--><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> English </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div></div> <!--GEOGRAPHY--><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> Geography </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div></div> <!--BUSINESS--><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> Business </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div></div> <!--FRENCH--><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> French </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div></div> <!--MUSIC--><div class="dropdown"><button onclick="myFunction()" class="dropbtn"><font face="courier"> Music </font></button><div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div><br><font size="2.5pt">============================================================================================</font></div>
<br>
</font>
When any of the menus are clicked, only the first dropdown comes up. 单击任何菜单时，仅出现第一个下拉菜单。 I know there's probably easier ways to do this, but I'd like the appearance to stay exactly as it. 我知道可能有更简单的方法可以做到这一点，但我希望外观保持原样。
If anyone could show me a fix for this, that'd be beyond helpful. 如果有人可以向我显示解决方案，那将无济于事。 Thank You! 谢谢！
1 个解决方案
解决方案1
0 已采纳 2018-02-25 00:26:59
Your whole document needs revamping to be more up to date in terms of standards and also to make things easier in making it work. 您的整个文档都需要进行修订，以在标准方面进行更新，并使其更易于使用。
Based on your current document; 根据您当前的文档；
Change all of you dropdown divs to be as so. 如此更改所有下拉div。
<div class="dropdown" onclick="myFunction(this)">
<button class="dropbtn"> Science </button>
<div id="myDropdown" class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>
</div>
Change your javascript to be as so; 将您的JavaScript更改为原样；
<script>
function myFunction(element) {
// Here I am assuming the dropdown div to have the same child
// elements in the same order each block
element.children[1].classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Add font-family: 'Courier New', Courier, monospace into the .dropbtn stylng in order to keep the font. 在.dropbtn样式中添加font-family: 'Courier New', Courier, monospace字体，以保留字体。 I would advise moving all of the font tags to use this method. 我建议移动所有font标签以使用此方法。 You should be using CSS for things like that. 您应该使用CSS这样的功能。
Things to note; 注意事项；
Tags that should not really be used any more; 真正不应该再使用的标签； <font> , <center> , <big> . <font> ， <center> ， <big> 。 - These should all be achieved through CSS properties bound to classes and/or IDs. -所有这些都应通过绑定到类和/或ID的CSS属性来实现。
ID should be set to a unique value for all elements that need it across the current DOM. 对于当前DOM中需要ID的所有元素，应将ID设置为唯一值。 Class is fine to be used multiple times across elements. Class可以跨元素多次使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.