2012-09-17 16 views
6

Jak wskazano w tytule, moje pytanie jest bardzo proste: czy istnieje sposób, w jaki mogę osiągnąć kliknięcie nagłówka (tytułu) i rozwinąć (i zwinąć) tekst powiązany z tym, bez użycia JavaScriptu ani jQuery? Czy istnieje sposób zgodny z przeglądarką (IE 6+ proof)?Kliknij nagłówek i rozwiń tekst bez użycia JavaScript/jQuery

Zrobiłem bardzo prostą stronę HTML + CSS na konferencję i chciałbym użyć JS tylko w razie potrzeby. Pytam więc, czy oczywiście mogę to zrobić przy użyciu HMTL/CSS w kompatybilny sposób.

Kilka znalezionych przeze mnie rozwiązań jest starych lub niezgodnych z niektórymi wersjami przeglądarek.

Dziękuję bardzo, Joao

+0

Powiedziałbym, że jedynymi opcjami są HTML5 lub JavaScript. Oba naruszają jeden z twoich warunków. – Samuel

+0

@Samuel: w jaki sposób HTML5 narusza jeden z warunków? – daGUY

+0

Obsługa IE6 – Samuel

Odpowiedz

9

IE6 - bezpieczne rozwiązanie CSS?

NO

[Zostaw martwe resztę w grobach, nie starają się uczynić je przebiec maraton. To, co robisz, gdy prosisz o IE6 robić takie rzeczy.]


IE7/8?

Tak, istnieje jedno rozwiązanie (zasada jest taka sama jak stosowana w this older demo of mine), ale to nie jest trwała (co oznacza, że ​​jeśli klikniesz gdziekolwiek na stronie, Twój rozszerzona zawartość załamie) i zachowuje nieco dziwaczne w IE7 (co oznacza, że ​​musisz po najechaniu na kliknięty element kliknąć go, aby zobaczyć, jak twoja zawartość się rozwija).


IE9 + i innych przeglądarek?

TAK! Również trwałe. Ta sama zasada co ta, którą użyłem here.


Metoda JavaScript/jQuery?

Tak! Zobacz: a jQuery version of the same demo.

+0

Dzięki za jasną odpowiedź, Ana. Niestety, niektórzy ludzie nadal używają IE 6 w dzisiejszych czasach, więc będę musiał je wziąć pod uwagę. Tak jak myślałem, naprawdę będę musiał użyć JS. – jaff

+0

Weź pod uwagę fakt, że jQuery rezygnuje z obsługi IE6, 7 i 8 (więc upewnij się, że nie automatycznie aktualizujesz wersji jQuery, której będziesz używać). Nadal polecam jQuery, jeśli chcesz używać JavaScript. IE jest przyzwoite, ale pisanie czystego JavaScriptu dla IE6 i 7 jest powodem bóle głowy. – Ana

+0

Prawdopodobnie będziesz chciał czegoś takiego http://codepen.io/thebabydino/pen/ByrAa – Ana

3

Można zrobić proste menu Hover rozwijanych z tylko HTML & CSS, które są obsługiwane krzyżowego przeglądarki:

http://jsfiddle.net/fkS2z/

można poprawić na to z zanika lub slidedowns z przejściami CSS, które nie są obsługiwane w niższej wersji IE:

http://jsfiddle.net/N9fDy/1/

Nie tyle za kliknięcie.

+0

Witaj, StewD. Chyba będę mieć problemy ze zgodnością z niektórymi wersjami IE (jak zawsze ...) jeśli używam tylko HMTL + CSS, więc wybiorę JS. Niemniej jednak, dzięki! – jaff