Forum PHP.pl > [JavaScript][CSS]CSS - zapisanie tego za pomocą Javascript.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS]CSS - zapisanie tego za pomocą Javascript.

ossUter

5.07.2015, 14:37:04

Siemanko.
Dzisiejszy problem mój polega na tym, że nie mam pojęcia jak przedstawić to:

[PHP] pobierz, plaintext 
nav ul ul {
	display: none;
}
 
	nav ul li:hover > ul {
		display: block;
	}
[PHP] pobierz, plaintext

Za pomocą JS, tzn; to jest od menu - jak na razie wysuwa się po najechaniu. Chcę zrobić to za pomocą kliknięcia (.click()), gdyby się udało.
Czyli - domyślnie aby nav ul ul miało display: none; a po kliknięciu w nav ul li pokazało się ul - display: block. Mógłbym liczyć na pomoc? Pozdrawiam.

prz3kus

5.07.2015, 15:18:23

JS
http://www.w3schools.com/jsref/prop_style_visibility.asp

jQuery

http://api.jquery.com/show/

http://api.jquery.com/hide/

Poczytaj

kafowi

5.07.2015, 15:35:19

Przy użyciu samego CSS również istnieje możliwość zrobienia pseudo-zdarzenia click().

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS :target menu</title>
  <style>
    nav ul ul {display:none;}
    nav ul ul:target  {display:block;}
  </style>
</head>
<body>
<nav>
  <ul>
   <li><a href="#aaa">Kliknij mnie</a><ul id="aaa">Bo mam cos pod sobą</ul></li>
   <li><a href="#iii">Kliknij mnie</a><ul id="iii">Bo mam cos pod sobą</ul></li>
   <li><a href="#uuu">Kliknij mnie</a><ul id="uuu">Bo mam cos pod sobą</ul> </li>
   <li><a href="#eee">Kliknij mnie</a><ul id="eee">Bo mam cos pod sobą</ul></li>
   <li><a href="#ooo">Kliknij mnie</a><ul id="ooo">Bo mam cos pod sobą</ul></li>
  </ul>
</nav>
</body>
</html>
[HTML] pobierz, plaintext

Comandeer

5.07.2015, 15:54:43

@kafowi można, ale w tym momencie za bardzo brudzi się adres. Już szybciej skorzystałbym tutaj z hacku z :checked - http://roberto.ovh.org/html-css/css_lightbox.html
A jak już :target to tylko jako fallback dla braku JS

kafowi

5.07.2015, 17:05:57

Cytat(Comandeer @ 5.07.2015, 16:54:43 )

Świetna sprawa z tym :checked na pierwszy rzut oka, ale po obejrzeniu i sprawdzeniu musi tam wystąpić :focus, a on działa zarówno na LPM jak i na PPM

Comandeer

5.07.2015, 17:23:23

O lol, nie, nie musi. Tam kiedyś było demko galerii na :checked, stąd podlinkowałem w ciemno - a tu widzę jakaś zmiana nastąpiła

"Prawdziwe" :checked: http://jsfiddle.net/Comandeer/3h7kjv4u/ + bardziej skomplikowane demko: http://bzdety.comandeer.pl/no-js.html

kafowi

5.07.2015, 17:35:59

Cytat(Comandeer @ 5.07.2015, 18:23:23 )

O lol, nie, nie musi. Tam kiedyś było demko galerii na :checked, stąd podlinkowałem w ciemno - a tu widzę jakaś zmiana nastąpiła

"Prawdziwe" :checked: http://jsfiddle.net/Comandeer/3h7kjv4u/ + bardziej skomplikowane demko: http://bzdety.comandeer.pl/no-js.html

No teraz to ja rozumiem

, ale nie wpływa to negatywnie na wyniki wyszukiwarek?
(bo przy większym menu trochę tych inputów by się narobiło, nie wspominając, że nie ma formularza)

Comandeer

5.07.2015, 17:43:12

Akurat brak formularza to raczej nie problem. Nie wiem czy wpływa to jakoś negatywnie na wyniki wyszukiwania - trza by jakieś testy porobić. Ale szczerze to wątpię.

Hack, jak i :target

Z tym, że podczas gdy :checked pozwala wyhaczyć "click" w środowiskach bez JS, tak :target jest świetnym wyjściem do rozbudowania na nim implementacji w JS (wystarczy dorobić toggle dla elementu wskazywanego przez this.href). Natomiast samodzielnie ani jednego, ani drugiego w produkcji raczej bym nie użył.

ossUter

6.07.2015, 14:25:33

Dzięki wielkie, zastosowałem się do tego i działa wybornie: http://jsfiddle.net/Comandeer/3h7kjv4u/

Tylko... Czy w samym CSS jest jeszcze możliwość sprawdzenia, tak, aby kilknięcie po za obszar klas: toggle i toggler powodowało znowu display: none?

Comandeer

6.07.2015, 14:49:05

Można zrobić trick z rozciągnięciem niewidzialnego label nad całą stronę… ale to już IMO ohydny hack

ossUter

6.07.2015, 14:59:10

W takim razie jakich funkcji JS powinienem użyć?

Comandeer

6.07.2015, 15:02:16

Obadaj to, co podesłał @prz3kus z jQuery - to będzie najprostsze do wdrożenia. Jest jeszcze: http://api.jquery.com/toggle/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.