1
我正在嘗試創建一個網站，其中有多個按鈕會導致出現下拉菜單。每個下拉菜單都有不同的東西，你可以從中獲得。到目前爲止，我沒有任何運氣。我不確定我做錯了什麼。我現在使用CSS，Java和HTML作爲按鈕。我有一個單獨的文件中的CSS和JavaScript。下面我列出了每個文檔中的所有編碼。我試過改變;類到IDS，ID到類，名稱到不同的東西。無論我點擊哪一個，第一個按鈕都會打開，或者沒有任何反應，沒有下拉或任何東西。任何想法或幫助，不勝感激。先謝謝你。需要關於下拉菜單的幫助
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'時，它總是以第一個目標爲目標，因爲瀏覽器不希望有多於一個。 –