Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nent

[Resolvido] Probleminha básico com o jQuery

Recommended Posts

Eu estou tentando incluir um menu em jQuery. Ele usa slideToggle() e hide() para esconder e mostrar menus com um click(). O problema é o CSS. Esse é o código:

 

ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
}

ul#menu a {
display: block;
text-decoration: none;	
}

ul#menu li {
width: 198px;
margin-top: 1px;
margin-bottom: 5px;
}

ul#menu li a {
background: #EEE;
color: #111;	
padding: 0.5em;
-webkit-border-radius: 5px;
}

ul#menu li a:hover {
background: #ddd;
}

ul#menu li ul li {
margin: 0px;
}

ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul#menu li ul li a:hover {
background: #ddd;
border-left: 5px #000 solid;
padding-left: 15px;
}

 

E esse é meu jQuery:

 

function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
	function() {
		$(this).next().slideToggle('normal');
	}
);
}
$(document).ready(function() {initMenu();});

 

O problema é que após clicar num item "principal", ele continua com todos os cantos arredondados. Eu quero que depois de clicado, ele tenha apenas os cantos superiores esquerdos e direitos arredondados.

 

Grato!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cria uma classe.

 

Exemplo:

CSS:

#menu li > a.active {
 -moz-border-radius:5px 5px 0 0;
}

jQuery (no evento click que você já tem):

$(this).toggleClass('active');

 

É claro que você deve fazer algumas adaptações.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.