2016-04-02 13 views
-1

Ich habe dieses relativ einfache Dropdown-Menü und bekomme es nicht. Warum zeigt es nur das letzte Menü, alles ist unter dem letzten? Und wenn ich darauf klicke, zeigt es zuerst den Namen gefolgt sofort von einer anderen Warnung, die "undefined" sagt. Hier ist das Dropdown, bei Hover wird das Untermenü angezeigt.Dropdown-Menü Grundlagen

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn {background-color: #4CAF50; color: white; cursor: pointer;} 
.dropdown { position: relative; display: inline-block;} 
.dropdown-content { display: none; position: absolute;} 
.dropdown-content a { display: block;} 
.dropdown-content a:hover {background-color: #f1f1f1} 
.dropdown:hover .dropdown-content { display: block;} 
.dropdown:hover .dropbtn { background-color: #3e8e41;} 
</style> 
</head> 
<body> 

<div class="dropdown"> 
<input type="button" id="dropbtnID" value="Select" class="dropbtn"> 
    <div class="dropdown-content">  
    <input type="text" value="a" id="a" class="dropdown-content"> 
    <input type="text" value="b" id="a" class="dropdown-content"> 
    <p id="c" name="c" class="dropdown-content">cc</p> 
    <p id="d" name="d" class="dropdown-content">dd</p> 
</div></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".dropdown-content").click(function(){ 
     var name = $(this).attr("name"); 
     alert(name);  
    }); 
}); 
</script> 
</body> 
</html> 
+0

Sorry zu sagen, dass es einfach alles falsch ist ... CSS und HTML sind nicht korrekt, Klassen schlecht verwendet (und so relativ css) – Yuri

+0

Verwenden Sie Bootstrap hier? Ihr Code enthält keine tatsächlichen HTML-Dropdownlisten. –

+1

Überprüfen Sie dies für eine sehr einfache Idee über Dropdown https://jsfiddle.net/7e82q0br/ – Yuri

Antwort

0

Es gibt viele Probleme mit dem Code. Zuerst müssen Sie die gleiche ID („a“) ​​für a und b:

<input type="text" value="b" id="b" class="dropdown-content"> 

und den Grund, warum Sie den undefinierten Alarm sind geting sind, dass Sie das übergeordnete Div mit der gleichen Klasse wie die Elemente in der Dropdown haben - also ist die erste Warnung für das Element (wie name="d") und die zweite für das Eltern-div mit keinem Namen (daher "undefined").

Dann gibt es die Layout-Probleme. Alles in allem - Sie müssen durch den Code zurückgehen und jede Zeile reparieren.

+0

die Klassen und behoben klappt wunderbar – manfred343