Hallo,
ich lasse Dropdown-Menüs für jeden Eintrag einer Datenbankabfrage per php erzeugen (Anfrage funktioniert). Bei der resultuierenden Webseite lässt sich jeder Menübutton anklicken - es öffnet sich jedoch immer das Dropdown-Menü des ersten Eintrages. Im resultierenden html-Code erscheinen die richtigen IDs in den Links des Menüs. Geöffnet wird aber immer nur das Dropdown-Menü des ersten Eintrages, auch wenn ich auf den Dropdown-Button den zweiten, dritten Eintrag klicke.
Kann jemamd helfen? Ich finde den Fehler nicht ...
Vielen Dank! Darßfreund
Hier die Quelltext-Auszüge:
php
$kla=0;
$klb=0;
$klc=0;
$kld=0;
foreach ($daten as $inhalt) {
if ($klausw == "klst"{
if ($i1 == 0) {
echo "<div class=\"container\">";
$i1++;
}
if ($inhalt->klasse == "$stuf"."a") {
if ($kla == 0) {
echo "<div class=\"box\"><h2><a href=\"austragungsportal.php?klausw=";
echo $stuf;
echo "a#1\">Klasse ";
echo $stuf;
echo "a</a></h2>";
$kla++;
}
if ($inhalt->ausgetragen == "kran") {
echo "<p class=\"ausgetragen\">";
}
else {
if ($inhalt->ausgetragen == "ausg") {
echo "<p class=\"ausgetragen\">";
}
else {
echo "<p class=\"anwesend\">";
}
}
echo "<a href=\"?aktion=anfragen&ID=";
echo $inhalt->ID;
echo "&klausw=";
echo $klausw;
echo "#1";
echo "\"> <button class=\"angefragt\">Ange</button></a>";
echo "<a href=\"?aktion=finden&ID=";
echo $inhalt->ID;
echo "&klausw=";
echo $klausw;
echo "#1";
echo "\"><button class=\"gefunden\">Gefu</button></a>";
echo "<a href=\"?aktion=austragen&ID=";
echo $inhalt->ID;
echo "&klausw=";
echo $klausw;
echo "#1";
echo "\"><button class=\"ausgetragen\">Aust</button></a>";
// Dropdown-Button
echo "<span class=\"dropdown\">";
echo "<button onclick=\"myFunction()\" class=\"bibogta\">Dropdown-Button</button>";
echo "<span id=\"myDropdown\" class=\"dropdown-content\">";
echo "<a href=\"?aktion=gtaort&ID="; echo $inhalt->ID; echo "&klausw="; echo $klausw; echo "#1"; echo "\">Eintrag 1</a>";
echo "<a href=\"?aktion=gtaort&ID="; echo $inhalt->ID; echo "&klausw="; echo $klausw; echo "#1"; echo "\">Eintrag 2</a>";
echo "<a href=\"?aktion=gtaort&ID="; echo $inhalt->ID; echo "&klausw="; echo $klausw; echo "#1"; echo "\">Eintrag 3</a>";
echo "<a href=\"?aktion=gtaort&ID="; echo $inhalt->ID; echo "&klausw="; echo $klausw; echo "#1"; echo "\">Eintrag 4</a>";
echo "<a href=\"?aktion=gtaort&ID="; echo $inhalt->ID; echo "&klausw="; echo $klausw; echo "#1"; echo "\">Eintrag 5</a>";
echo "</span>";
echo "</span>";
echo "</p>";
}
js
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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('.bibogta')) {
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>
css
/* Dropdown-Menue */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
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 a:hover {background-color: #ddd;}
.show {display: block;}
.bibogta {background: #ce5cee; color: #ffffff;}