Anfänger kämpfen mit einem einfachen Dropdown-Menü

Insbesondere versuche ich, ein Dropdown-Menü mit Links gefüllt, die auf die angegebenen Standorte in Google Maps verweisen, wenn Sie darauf klicken. Es ist mir gelungen, Google Maps in meine Seite einzubetten, aber aus irgendeinem Grund kann es nicht vorkommen, dass der Drop-down-Vorgang eintritt und das Problem nicht in meinem Code gefunden werden kann. Ich bemühe mich auch zu verstehen, wie man die Links im Dropdown-Menü erstellt, um zum ausgewählten Ort auf der Google-Map zu gelangen. Jede Hilfe wäre willkommen. Der Code, den ich bisher haben ...Anfänger kämpfen mit einem einfachen Dropdown-Menü

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

 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 
    var dropdowns = document.getElementByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show') 
 
     } 
 
    } 
 
    } 
 
} 
 

 
function initMap() { 
 
    var Columbia = { 
 
    lat: 34.006140, 
 
    lng: -81.037532 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: Columbia 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: Columbia, 
 
    map: map 
 
    }); 
 
}

.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; 
 
    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: #f1f1f1 
 
} 
 

 
#map { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5cD8oVYji2MWCAj8JzrAzQtpBy12W30o&callback=initMap"> 
 
</script> 
 
<h3>Google Maps/Form Assignment</h3> 
 
<div id="map"></div> 
 
<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Select a location</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#london">London, England</a> 
 
    <a href="#tokyo">Tokyo, Japan</a> 
 
    <a href="#newyork">New York City, USA</a> 
 
    </div> 
 
</div>

Quelle

2017-03-06 B. Brig

1) die Klasse Drop-Down-Conte nt' hat keine Anzeige, aber für die Klasse 'show' ist kein Stil definiert, so dass die Anzeige an keiner klebt, und 2) Sie einen Syntaxfehler in' document.getElementByClassName' haben, ersetzen Sie ihn durch 'document.getElementsByClassName' – nosthertus

werde ich posten eine Antwort mit deiner Lösung, gib mir einen Moment – nosthertus

Ich sehe Sie 2 verschiedene Funktionen für den gleichen Prozess hinzugefügt haben, müssen Sie nur 1, so werde ich mit den Fehlerbehebungen, den Code zeigen:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
     .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; 
      overflow: auto; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
      z-index: 1; 
     } 
     /*Add this rule so the dropdown can be shown*/ 
     .dropdown-content.show{ 
      display: block; 
     } 
     .dropdown-content a { 
      color: black; 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
     } 
     .dropdown a:hover { 
      background-color: #f1f1f1 
     } 
     #map { 
      height: 400px; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <h3>Google Maps/Form Assignment</h3> 
    <div id="map"></div> 
    <div class="dropdown"> 
     <button class="dropbtn">Select a location</button> 
     <div id="myDropdown" class="dropdown-content"> 
      <a href="#london">London, England</a> 
      <a href="#tokyo">Tokyo, Japan</a> 
      <a href="#newyork">New York City, USA</a> 
     </div> 
    </div> 

    <script> 
     window.onclick = function(event){ 
      var target = event.target; 

      if(target.matches('.dropbtn')){ 
       var dropdowns = document.getElementsByClassName("dropdown-content"); //This returns a HTMLCollection 

       for(i=0; i < dropdowns.length; i++){ 
        // Since dropdowns is a HTMLCollection, extract the node from the collection 
        var dropdown = dropdowns.item(i); 

        // Toggle the dropdown whenever the button is clicked 
        dropdown.classList.toggle("show"); 
       } 
      } 

      if(target.matches(".dropdown-content > a")){ 
       // Get the location name from the hash 
       var location = target.hash.slice(1); 

       // Extract the location map and set it as center 
       map.setCenter(positions[location]); 
      } 
     }; 
     </script> 
     <script> 
      function initMap() { 
       // Set all locations map 
       window.positions = { 
        london: { 
         lat: 51.5013616, 
         lng: -0.1965444 
        }, 
        southCarolina: { 
         lat: 34.006140, 
         lng: -81.037532 
        } 
       }; 

       window.map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 4, 
        center: positions.southCarolina 
       }); 

       // Add marker positions in the map 
       var markers = { 
        london: new google.maps.Marker({ 
         position: positions.london, 
         map: map 
        }), 
        southCarolina: new google.maps.Marker({ 
         position: positions.southCarolina, 
         map: map 
        }) 
       }; 
      } 

    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5cD8oVYji2MWCAj8JzrAzQtpBy12W30o&callback=initMap"> 
    </script> 
</body> 
</html>

Ich habe in den Kommentaren hinzugefügt, was als Unterschied von Ihrem Code hätte getan werden sollen.

Sie müssen wissen, dass document.getElementsByClassName gibt ein HTMLCollection Objekt, das nur length als Eigenschaft und 2 Methoden hat, die item und namedItem, können Sie die Dokumentation für HTMLCollection und Dokumentation für getElementsByClassName

EDIT sehen: Ich habe Ich habe auch ein Beispiel für london hinzugefügt, so dass Sie den Rest für andere Standorte fortsetzen können

Quelle

2017-03-06 04:52:25 nosthertus

Anfänger kämpfen mit einem einfachen Dropdown-Menü

Antwort

Verwandte Themen