1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

DropDown klappt sich ein beim Anklicken des Contents

Dieses Thema im Forum "JavaScript" wurde erstellt von Timer, 12 Februar 2018.

  1. Timer

    Timer Mitglied

    Registriert seit:
    2 August 2017
    Beiträge:
    89
    Punkte für Erfolge:
    8
    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:
    1.     <div id="dropDownButtons">
    2.         <a onclick="accountDropDown()" id="accountDropDown-a">Account</a>
    3.     </div>
    4.     <div id="accountDropDownContent" onclick="accountDropDownClick()">
    5.     </div>
    Code (text):
    1. function accountDropDown() {
    2.     if(accountDrop == 0) {
    3.         document.getElementById("accountDropDownContent").style.display="block";
    4.         accountDrop = 1;
    5.     }
    6.     else {
    7.         document.getElementById("accountDropDownContent").style.display="none";
    8.         accountDrop = 0;
    9.     }
    10. }
    11.  
    12. window.onclick = function(event) {
    13.     if(!event.target.matches("#accountDropDown-a") && !event.target.matches("#accountDropDownContent")) {
    14.         document.getElementById("accountDropDownContent").style.display="none";  
    15.         accountDrop = 0;  
    16.     }
    17. }
    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:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    232
    Punkte für Erfolge:
    28
    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
     
  3. Timer

    Timer Mitglied

    Registriert seit:
    2 August 2017
    Beiträge:
    89
    Punkte für Erfolge:
    8
    Ich habe im DropDownContent verschiedene Checkboxen. Da ist das Problem, dass wenn ich eine Checkbox auswähle, sich das DropDown schließt
     
  4. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    232
    Punkte für Erfolge:
    28
    So jetzt noch mal https://jsfiddle.net/basti1012/hcwsx76f/2/
    Ist auch nicht die optimalste Lösung ,aber Funktioniert.

    Oder hast du vorgaben wie der Code sein muß ?
    Es wäre auch möglich komplett ohne Javascript .
     
    Timer gefällt das.
  5. Timer

    Timer Mitglied

    Registriert seit:
    2 August 2017
    Beiträge:
    89
    Punkte für Erfolge:
    8
    Danke das passt
     
  6. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    686
    Punkte für Erfolge:
    43
    Eigentlich kannst du da auf alles verzichten, wenn du einfach:
    Code (JavaScript):
    1.  
    2. <div id="dropDownButtons">
    3.      <a onclick="$('#accountDropDownContent').toggle();" id="accountDropDown_a">Account</a>
    4. </div>
    5. <div id="accountDropDownContent"><input type="checkbox" id="check">
    6. </div>
    schreibst...

    Code (JavaScript):
    1. <a onclick="$('#accountDropDownContent').toggle();" id="accountDropDown_a">Account</a>
    ersetzt also all das andere Javascript und gedöns.
     
  7. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    232
    Punkte für Erfolge:
    28
    Stimmt ist auch kürzer.Ich sollte erst denken dann schreiben,weil auf toogle() bin ich gar nicht gekommen ,erst wo ich es jetzt sehe.

    Css Variante mit checkbox Trick https://jsfiddle.net/basti1012/2uk5Lq3x/

    Ich glaube da kann man nicht mehr viel ändern oder geht das auch nochkürzer und einfacher?
     
  8. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    686
    Punkte für Erfolge:
    43
    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.