Ir para o conteúdo
luislopes

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

Mensagens Recomendadas

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 ...

Editado por Rechousa

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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');
});

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

  • Voto 1

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.