【发布时间】：2017-04-14 00:58:52
【问题描述】：
我正在尝试创建一个包含多个按钮的网站，这些按钮会导致出现下拉菜单。每个下拉菜单都有不同的内容可供您选择。到目前为止，我没有任何运气。我不确定我做错了什么。我现在正在为按钮使用 CSS、Java 和 HTML。我将 CSS 和 JavaScript 放在一个单独的文件中。下面我列出了每个文档中的所有编码。我试过改变；类到 ids，ids 到类，不同事物的名称。无论我点击哪个按钮，第一个按钮都会打开，或者什么也没有发生，没有下拉菜单或任何东西。非常感谢任何想法或帮助。提前谢谢你。
HTML 文档
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="keywords" content="content here">
<meta name="description" content="Contains information on strategies .">
<link rel="stylesheet" href="/Subcode/CSS/index.css" type="text/css" media="screen">
<link rel="stylesheet" href="/Subcode/CSS/dropdownbuttons.css" type="text/css" media="screen">
<script src="Subcode/Java/button.js"></script>
<script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script><script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script>
<link rel="search" href="Subcode/xhtml/search.xml" type="application/opensearchdescription+xml" title="Open Search">
</head>
<body background="Images/Background/Finished/bg1.jpg">
<div class="sleft">
<div class="webDD">
<button onclick="webInfo()" class="webDropbtn">A button</button>
<div id="webDD" class="webDDCon">
<a href="about.html">About the Site</a><br>
<a href=""></a><br>
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
</div>
</div>
<link rel="stylesheet" href="/Subcode/CSS/dropdownbutton.css" type="text/css" media="screen">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">A button</button>
<div id="myDropdown" class="dropdown-content">
<a href=""></a><br>
</div>
</div>
</div>
<div class="mbody">
</div>
<div class="bottom">
</div>
</body>
</html>
CSS 文档
/* Dropdown Button A */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
JavaScript 文档
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
【问题讨论】：
-
这是因为您对所有下拉菜单使用相同的
id，并且您只能使用一次id。因此，当您在#myDropdown上切换.show时，它总是针对第一个，因为浏览器不希望有多个。
标签： html javascript css