Einzelnen Beitrag anzeigen
  #1  
Alt 22.02.2016, 19:14:49
Joko Joko ist offline
Anfänger
 
Registriert seit: Feb 2016
Alter: 46
Beiträge: 1
Drop Down Menü Java Script Hilfe!

Hi zusammen hier! Bin neu hier und bräuchte Hilfe!
Und zwar habe ich Probleme mit dem Drop Down Menü für mein Schachspiel. Ich habe einen mehrfach Auswahl bei dem Feld Spiel aber kriege es nicht hin bei den weiteren Menüpunkten in der Auswahl Anzeige wie zB Spieler weitere Auswahlpunkte zu bekommen. Ich füge mal den Quellcode ein vll kann jemand helfen. Habe heut schon mehrere Std damit verbracht(bin neu im programmieren).
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    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);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Spiel</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Neues Spiel</a>
      <a href="#">Letzten Spielstand laden</a>
      <a href="#">Spieler einladen</a>
    </div>
    <li><a href="#news">Spieler</a></li>
      <li><a  href="#home">News</a></li>
      <li><a href="email.php">Kontakt</a></li>
      <li><a href="impressum.php">Impressum</a></li>
  </li>
 
  
  
</ul>


<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}


window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>
Mit Zitat antworten