Jump to content
luislopes

[Resolvido] Jquery para mostrar dropdown quando se passa o rato por cima

Recommended Posts

luislopes

Boas,

Estou a fazer um site responsivo de uma página com a "ajuda" do Twitter Bootstrap, ou seja, quando a largura da página for menor que 780px o menu é escondido.

No meu menu tenho uma dropdown, que por default abria quando eu clicava nesse separador e para fechar a dropdown teria de clicar novamente no separador, com um bocado de pesquisa fiz com que o menu dropdown aparecesse quando se passa o rato por cima. Fiz isso com este código:

jQuery('ul.nav li.dropdown').hover(function() {
	 jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
 }, function() {
	 jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
 });

Funciona perfeitamente !

Só que no menu para mobile (o tal das resoluções mais pequenas) não fica nada bem o dropdown a aparecer automaticamente, portanto o que eu queria era activar o mousehover quando a largura da página fosse no minimo 780px e quando fosse menor retirava-se o mousehover.

Para tal tentei usar o código acima, com um If. coloquei o código tanto no document.ready tal como no window.resize, mas resulta apenas parcialmente.

Se eu iniciar o site com uma largura menor que 780px e depois aumentar, ele com menos de 780px nao abre automaticamente e quando passa para mais que 780px mostra automaticamente (perfeito!), mas depois de estar activado já não desactiva.

Deve ser apenas preciso um else para inverter o código acima, mas não sei como fazê-lo.

Se fizer unbind do mouseenter e do mouseloeave consigo parar com o mousehover como queria !

Mas no entanto também deixa de funcionar o click o que é necessário ...

Edited by Rechousa

Share this post


Link to post
Share on other sites
taviroquai

Viva,

Basta colocares um IF dentro do evento a verificar a largura da janela...

$('.nav .dropdown').hover(function(e) {
if ($(window).width() < 780) return;
alert('evento hover');
});

Share this post


Link to post
Share on other sites
luislopes

Não resolve ...

Eu tenho o código que coloquei em cima num If, se eu começar com uma largura menor a 780px (menu mobile) não abre a dropdown com o hover (tal como eu quero) e se depois aumentar a largura ele abre automaticamente (é isto mesmo!).

Só que no processo contrário ele não faz nada (porque lhe falta o else).

Eu preciso de um else que desfaça o código do if, mas não sei como faze-lo.

Tal como disse o melhor que consegui foi fazer o unbind do mouseenter e do mouseleave, mas depois nem consigo clicar para mostrar a dropdown onclick

Share this post


Link to post
Share on other sites
luislopes

Ja resolvi ;)

O que eu faço com esse código consigo fazer com

ul.nav li.dropdown:hover ul.dropdown-menu{
 display: block;
}

Portanto criei uma media query e está tudo a dar como esperado.

  • Vote 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.