• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DropDown klappt sich ein beim Anklicken des Contents

Timer

Mitglied
Hey,
Ich habe mir ein DropDown Menü erstellt. Leider ist nun das Problem, wenn ich auf den DropDownContent drücke, sich dieses einklappt. Leider weiß ich nicht wie ich das verhindere. Hat jemand ne Idee?
s
HTML:
    <div id="dropDownButtons">
        <a onclick="accountDropDown()" id="accountDropDown-a">Account</a>
    </div>
    <div id="accountDropDownContent" onclick="accountDropDownClick()">
    </div>
Code:
function accountDropDown() {
    if(accountDrop == 0) {
        document.getElementById("accountDropDownContent").style.display="block";
        accountDrop = 1;
    }
    else {
        document.getElementById("accountDropDownContent").style.display="none";
        accountDrop = 0;
    }
}

window.onclick = function(event) {
    if(!event.target.matches("#accountDropDown-a") && !event.target.matches("#accountDropDownContent")) {
        document.getElementById("accountDropDownContent").style.display="none";   
        accountDrop = 0;   
    }
}
Das "!event.target.matches("#accountDropDownContent")" War jetzt eigentlich das Einzige, was mir eingefallen ist, was ich machen könnte. Leider hilft das nicht. Wie könnte ich das sonst noch machen?
CSS habe ich jetzt mal weggelassen, da das in dem Fall unnötig ist...
PS: Kann gut sein, dass das sehr schlecht gelöst ist, da meine letzte gute/aufwändige Webseite schon länger her ist. Darum bitte nicht mit Kritik sparen ^^
 
Werbung:
Was meinst du genau .Es ist immer mist da durch zusteigen wenn man nur Code stückchen hat. Wenn ich auf accound klicke geht ein div auf und auch wieder zu.Das soll wohl so sein oder ? Du mußt das etwas genauer erklären .Zumindest für mich. In einer Css kann auch ein Fehler stecken .Aber in diesen Fall wohl nicht
 
Ich habe im DropDownContent verschiedene Checkboxen. Da ist das Problem, dass wenn ich eine Checkbox auswähle, sich das DropDown schließt
 
Werbung:
So jetzt noch mal

*** Link entfernt, weil nicht mehr erreichbar ***
Ist auch nicht die optimale Lösung ,aber funktioniert.

Oder hast, du vorgaben wie der Code sein muss ?
Es wäre auch möglich, komplett ohne Javascript .
 
Zuletzt bearbeitet:
Eigentlich kannst du da auf alles verzichten, wenn du einfach:
Javascript:
<div id="dropDownButtons">
     <a onclick="$('#accountDropDownContent').toggle();" id="accountDropDown_a">Account</a>
</div>
<div id="accountDropDownContent"><input type="checkbox" id="check">
</div>
schreibst...

Javascript:
<a onclick="$('#accountDropDownContent').toggle();" id="accountDropDown_a">Account</a>
ersetzt also all das andere Javascript und gedöns.
 
Werbung:
Stimmt, ist auch kürzer. Ich sollte erst denken, dann schreiben, weil auf toggle() bin ich gar nicht gekommen ,erst wo ich es jetzt sehe.
CSS Variante mit Checkbox Trick
*** Link entfernt, weil nicht mehr erreichbar ***
Ich glaube da kann man nicht mehr viel ändern oder geht das auch noch kürzer und einfacher?
 
Zuletzt bearbeitet:
Ich glaube da kann man nicht mehr viel ändern oder geht das auch nochkürzer und einfacher?
Fällt mir jetzt auch nicht ein. Aber hier würde ich auf die input-opacity-0-Variante verzichten, da hier ja Javascript verwendet werden darf. Wenn kein Javascript verwendet werden soll, da empfehle ich diese Variante.
 
Zurück
Oben