• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Rozwijane menu - Jak schować liste przy zjechaniu kursorem?

Object Storage Arubacloud
0 głosów
696 wizyt
pytanie zadane 13 lipca 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)
zamknięte 13 lipca 2020 przez Bakkit
Witam. Mam na swojej stronie rozwijane menu (Po najechaniu na element w nav'ie, pod nim pokazuje się lista). Przy najechaniu działa ładnie, ale nie mam pojęcia jak zaimplementować znikanie listy gdy użytkownik zjedzie kursorem z listy. Najlepiej w jquery. Pozdrawiam.
komentarz zamknięcia: Rozwiązanie problemu.
komentarz 13 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)
Pokaż Twój kod, który rozwija menu po najechaniu myszą.
komentarz 13 lipca 2020 przez Bakkit Dyskutant (7,600 p.)
$(document).ready(function(){
	$('.nav-drop').mouseover(function(){
		$('.nav-drop').removeClass('item-active')
		$('.nav-dropdown').removeClass('nav-dropdown-active')
		$(this).toggleClass('item-active');
		var next = this.nextElementSibling;
		$(next).toggleClass('nav-dropdown-active');
	});
});

Mam takie listy rozwijane 3 w menu, dlatego w kodzie 3 i 4 linia usuwają najpierw wszystkie dotychczasowe "rozwijania" i potem zostaje nakładana klasa active na element this.

2 odpowiedzi

+1 głos
odpowiedź 13 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 13 lipca 2020 przez Bakkit
 
Najlepsza

Skoro rozwijasz menu manipulując klasami CSS w callbacku do jQuery mouseover, to zwinąć menu możesz odwrotnymi manipulacjami w callbacku do metody jQuery mouseleave.

P.S. W razie problemów z triggerowaniem callbacka przy mouseover, rozważ zmianę na metodę mouseenter, która radzi sobie z bąbelkowaniem zdarzeń, dzięki czemu callback nie jest odpalany, gdy najedzie się myszą na elementy wewnątrz elementu do którego docelowo się podpiąłeś.

komentarz 13 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Możliwe też, że opędziłbyś zwijanie i rozwijanie jednym callbackiem (tzn. przekazaniem jednej referencji do funkcji do mouseleave i mouseover), a w środku zamienił użycie metody removeClass na toggleClass - przy założeniu, że nie będzie trzeba dokładać dodatkowej "ifologii", gdy sama funkcja w przyszłości będzie zawierać więcej kodu specyficznego dla danego stanu (rozwinięcia lub zwinięcia).

–1 głos
odpowiedź 13 lipca 2020 przez Ilya Dimow Obywatel (1,240 p.)

To można zrobić przez css. Tutaj są przykłady https://css-tricks.com/solved-with-css-dropdown-menus/ . 

komentarz 13 lipca 2020 przez Bakkit Dyskutant (7,600 p.)
Chodziło mi szczególnie o sposób w javascript, bo właśnie jego się uczę, ale dziękuję.

Podobne pytania

0 głosów
1 odpowiedź 606 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez ethern Nowicjusz (150 p.)
0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 2 czerwca 2020 w HTML i CSS przez Jajestem Użytkownik (670 p.)
0 głosów
1 odpowiedź 293 wizyt
pytanie zadane 20 maja 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)

92,698 zapytań

141,613 odpowiedzi

320,139 komentarzy

62,057 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...