[CSS] Lista, (nie)zwykła lista Opcje

[session]

Witajcie (IMG:style_emoticons/default/rolleyes.gif)

Znowu postanowiłem coś pomajsterkować (IMG:style_emoticons/default/wink.gif) Tym razem celem jest stworzenie listy dwupoziomowej, w której drugi poziom rozwija się po kliknięciu elementu, a pozostałe znikają do momentu kliknięcia poza listą, a teraz haczyk - bez wykorzystania JS (CSS only) (IMG:style_emoticons/default/smile.gif)

Oczywiście pierwsza część, czyli rozwijanie niższego poziomu po kliknięciu jest dosyć proste do osiągnięcia, z pomocą przychodzi atrybut tabindex="0" dodany do elementów listy oraz selektor :focus umożliwiający zmianę reguły display. Co daje zamierzony efekt.

Problem pojawia się w drugiej części, w znikaniu pozostałych elementów listy. Pierwszy nocny pomysł to użycie selektora rodzeństwa li:focus ~ li i zmiana reguły display, chwilowa ekscytacja po wybraniu pierwszego elementu i późniejsze uświadomienie sobie, że obejmuje on jedynie rodzeństwo występujące poniżej wybranego elementu. Niestety, a może stety selektorami nie da się wrócić do węzła rodzica li:focus < ul (IMG:style_emoticons/default/sadsmiley02.gif) co stanowi wyzwanie w tym momencie. Więc jak ukryć pozostałe elementy, rozwiązaniem mogłoby się okazać ul:has(+li:focus), no właśnie mogłoby, ponieważ browsers support jest tak marny że właściwie go nie ma (IMG:style_emoticons/default/tongue.gif)

Wtedy zacząłem kombinować jakby wyłapać jedno kliknięcie dwa razy, skoro li to dziecko ul, to przecież kliknięcie li powinno być równocześnie wybraniem ul, no ale nie jest. Pobawiłem się trochę z-indexami i pointer-events, ale nie przyniosło oczekiwanego skutku, próbowałem wykorzystać fakt że focus elementu listy może być jednoczesnym defocusem samego ul, gdyby tylko działał autofocus... a nie jednak user i tak zostawałby bez listy po defocusowaniu (IMG:style_emoticons/default/dry.gif) Przypomniałem sobie jeszcze o selektorze :active... A co to za czary (IMG:style_emoticons/default/blink.gif) Jednak li jest dzieckiem ul. Działa dobrze... do momentu zwolnienia lewego przycisku myszy. Widziałem gdzieś jeszcze wykorzystanie transition visibility do opóźnienia defocusowania elementu, ale nie znalazłem zastosowania. No i na tym kończyłyby się moje pomysły (IMG:style_emoticons/default/worriedsmiley.gif) . Ktoś coś ? Jakiś pomysł ? (IMG:style_emoticons/default/wink.gif)

PS. Może warto byłoby przenieść forum w 10101 wiek i wprowadzić run snippet oraz inline code znane ze stacka (IMG:style_emoticons/default/nerdsmiley.png)
PPS. Tak, tak wiem, że mogłem skończyć na pierwszym akapicie

Ten post edytował session 19.06.2016, 13:30:42

[trueblue]

A coś takiego?
https://jsfiddle.net/ydaqkuy2/

[session]

@trueblue dzięki za pomysł (IMG:style_emoticons/default/smile.gif) ale niestety nie znika mi nic po kliknięciu (IMG:style_emoticons/default/sad.gif)

Ale... Pokombinowałem trochę i przed chwilą właśnie się udało (IMG:style_emoticons/default/cool.gif) Wykorzystałem to, że będę mógł założyć jaką wysokość będzie miała moja lista, ponieważ będzie się ona składała z elementów określonej wysokości, a li:focus ~ li okazało się kluczowe, pozostało mi tylko "wypchnąć" pozostałe, poprzedzające elementy poza górną krawędź wrappera, position: absolute; bottom:0; umożliwiło wyświetlenie tylko ostatniego elementu listy, który przyjmuje 100% wysokości wrappera.

U mnie na lisku działa (IMG:style_emoticons/default/rolleyes.gif) :

CodePen

Wadą jest to, że trzeba określić wysokości (IMG:style_emoticons/default/sadsmiley02.gif)

Ten post edytował session 20.06.2016, 11:28:04