2016-06-30 18 views
3

http://codepen.io/anon/pen/GqmEAqCSS nach Ereignisse geklickt

Ich versuche, die x zu machen geklickt (x nach Menü erstellt wird Pluszeichen geklickt wird) und dann die Drop-Down-Erziehung zurück.

Ich habe versucht,

a:after:checked ~ .submenu{ 
    max-height: 999px; 
} 

Ich weiß, ich bin in der Nähe, aber ich kann nicht die Drop-Bar erhalten Sie bis zu gehen, wenn die ‚x‘ geklickt wird

+0

Ich bin ein wenig verwirrt, weil in Ihrer Frage, Sie sprechen über das x in der Art und Weise Ihrer Drop-Down-Schließung bekommen, aber die CSS, die Sie in deiner Frage gepostet hat mit der '.submenu' Höhe zu tun. Bitte klären Sie die Frage so, dass sie sich auf ein einzelnes Problem bezieht. Wenn Sie ein anderes Problem haben, erstellen Sie eine separate Frage. –

+0

Hey Hunter - tut mir leid. Ich wusste nicht, dass es auch mein Stift war. krank kreire einen separaten dank! – user6535413

+0

Wenn Sie diese 'A's zu wechseln sind in der Lage zu' label's mit 'for' Attribute, werden Sie das Problem beheben. Gerade jetzt ist das Problem, dass das Pseudoelement des Klick holt (ehrlich gesagt ein bisschen überraschte die 'a' nicht). Ein 'Label' wäre semantisch korrekter und ein Klick auf das Pseudoelement würde das Kontrollkästchen umschalten. Zusätzlicher Bonus, du könntest dann die Checkboxen ausblenden und stattdessen Styling auf die Labels anwenden (was sehr viel förderlicher ist). – abluejelly

Antwort

1

Wenn das x in der immer ist Art und Weise der Sie das Menü öffnen und zu schließen, dann können Sie pointer-events: none; zu Ihrem nav ul > li.sub > a:after hinzufügen.

CSS

nav ul > li.sub > a:after { 
    pointer-events: none; 
} 

CodePen

+0

hmm ich laufe in ein Problem, wenn ich es erweitern. Gibt es da eh eine feste Höhe drauf oder so? – user6535413

+0

Der Code, den ich hinzugefügt habe, verursachte dieses Problem nicht. Im CodePen funktioniert es wie erwartet. Hattest du dieses Höhenproblem schon einmal? –