Hallo,
ich habe eine Frage zu verschachtelten Aufklapplisten mit
Soweit so gut.
Nun möchte ich auch verschachtelte Listen anlegen und scheitere an der Vererbung der Transformationseigenschaften.
Das Ziel: Level 1 '+' (blau) wird beim Aufklappen rot und dreht sich 45° Level 2 '+' sollte dann grün sein und beim Aufklappen schwarz werden und sich ebenfalls 45° drehen.
Mein Ergebnis: Level 1 '+' verhält sich wie gewünscht. Level 2 '+' ist sofort schwarz, nicht gedreht und verändert sich nicht beim Anklicken.
Kann mir jemand einen Tipp geben, wo mein Fehler liegt?
Meine Liste sieht so aus:
Aufklappen Level 1
- Level 1 Item 1
Level 1 Item 2 = Aufklappen Level 2
- Level 2 Item 1
- Level 2 Item 2
- Level 2 Item 3
Level 2 Item 4 = Aufklappen Level 3
- Level 3 Item 1
- Level 3 Item 2
- Level 2 Item 4
- Level 1 Item 3
- Level 1 Item 4
Das CSS dazu:
/****** LISTEN AUFKLAPPEN *******/
summary {
position: relative;
}
summary::marker, summary::-webkit-details-marker {
color: transparent;
}
summary::after {
content: "+";
position: absolute;
color: blue;
font-size: 2em;
font-weight: bold;
left: 0em;
top: 0em;
transition: all 0.5s;
}
details[open] summary::after {
color: red;
transform: translate(5px,0) rotate(45deg);
}
summary.second {
position: relative;
}
summary.second::marker, summary.second::-webkit-details-marker {
color: transparent;
}
summary.second::after {
content: "+";
position: relative;
color: green;
font-size: 1em;
font-weight: bold;
right: 1em;
top: 0em;
transition: all 0.5s;
}
details[open] summary.second::after {
color: black;
transform: translate(5px,0) rotate(45deg);
}
Vielen Dank schon mal! Anja
