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;}