1
Ich versuche, eine Website mit mehreren Schaltflächen zu erstellen, die dazu führt, dass ein Dropdown-Menü angezeigt wird. Jedes Dropdown-Menü wird verschiedene Dinge haben, aus denen Sie können. Bis jetzt habe ich kein Glück. Ich bin mir nicht sicher, was ich falsch mache. Ich verwende gerade CSS, Java und HTML für den Button. Ich habe das CSS und JavaScript in einer separaten Datei. Im Folgenden habe ich alle Kodierungen in jedem Dokument aufgelistet. Ich habe versucht, mich zu ändern; Klassen zu IDs, IDs zu Klassen, die Namen zu verschiedenen Dingen. Entweder der erste Button öffnet sich, egal an welchen ich klicke oder nichts passiert, kein Drop-Down oder so. Irgendwelche Ideen oder Hilfe wird sehr geschätzt. Vielen Dank im Voraus.Benötigen Sie Hilfe bei den Dropdown-Menüs?
HTML Doc
<!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 Doc
/* 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 Doc
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');
}
}
}
}
es ist, weil Sie die gleiche ID für alle Dropdown-Menüs verwenden, und Sie können nur einmal eine ID verwenden. Wenn Sie also ".show" auf "# myDropdown" schalten, wird immer der erste ausgewählt, da der Browser nicht erwartet, dass mehr als einer davon vorhanden ist. –