menu com mouseenter e click

[marcelo2605 10]

Tenho a seguinte estrutura html:

 

           <div id="continentes">
       	<ul>
           	<li><div></div><a href="#america_sul">América do Sul</a></li>
               <li><div></div><a href="#america_norte">América do Norte</a></li>
               <li><div></div><a href="#europa">Europa</a></li>
               <li><div></div><a href="#africa">África</a></li>
               <li><div></div><a href="#asia">Ásia</a></li>
               <li><div></div><a href="#australia">Austrália</a></li>
           </ul>
       	</div>

 

O script abaixo serve para acrescentar um bullet quando o mouse estiver sobre o item:

 

var botao = $('#continentes ul li a');
var block = $('.block');

botao.mouseenter(function(){
	var $this = $(this);
	$this.prev().addClass('block');
});

botao.mouseleave(function(){
	var $this = $(this);
	$this.prev().removeClass('block');
});

 

Mas eu queria que o bullet se mantivesse quando o item fosse clicado. Então criei um script adicionando uma classe idêntica (block2):

 

botao.click(function(e){
       e.preventDefault(); //evita que o href funcione
	var $this = $(this); //armazena qual é o botão que foi apertado

	$this.prev().addClass('block2'); //adicona o block ao botão clicado
	$this.find('div').not($this).removeClass('block2');//remove o negrito dos outros botões
   });

 

Funciona, mas na hora de clicar em outro item, o bullet anterior permanece.

[William Bruno 1501]

ai não é $this amigo, é botao:

 

botao.find('div').not($this).removeClass('block2');//remove o negrito dos outros botões

[marcelo2605 10]

William, mas a linha:

 

var $this = $(this);

 

não determina o botão que foi apertado?

 

pelo que eu entendi, a linha:

 

$this.find('div').not($this).removeClass('block2');

 

Está dizendo para procurar todas as divs com exceção da div dentro de $this e remover a classe. Não é isso?

[William Bruno 1501]

William, mas a linha:

 

var $this = $(this);

 

não determina o botão que foi apertado?

sim, determina.

 

 

pelo que eu entendi, a linha:

você entendeu errado.

 

Veja:

$this.find('div')

ou seja, vai pegar todas as DIVs filhas do objeto clicado, ou seja, não pega nenhum dos outros.

 

Que é oque você quer.

Por isso que aqui você deve usar o botao e não o this.

[marcelo2605 10]

William, desculpe. Não funcionou:

 

	botao.click(function(e){
       e.preventDefault(); //evita que o href funcione
	var $this = $(this); //armazena qual é o botão que foi apertado

	$this.prev().addClass('block2'); //adicona o block ao botão clicado
	botao.find('div').not($this).removeClass('block2');//remove o block2

	$this.addClass('negrito'); //adicona negrito ao botão
	$this.parents( 'ul' ).find('a').not($this).removeClass('negrito');//remove o negrito dos outros botões


	var $nome = $this.attr('href'); //armazena o href do botão
	$($nome).show('slow'); //abre o painel com o mesmo nome do href do botão
	//$($nome).siblings('.apagar').hide('slow');//apaga todos os outros painéis
   });

 

Da forma que está ao clicar em outro item, o anterior continua com o block2

[William Bruno 1501]

coloque assim:

 

botao.parent('li').find('div').not( $this.prev() ).removeClass('block2');//remove o block2

 

 

ou de uma forma mais simples:

-> remova tudo

-> depois coloque no que você quer

 

               botao.prev().find('div').removeClass('block2');//remove o block2
               $this.prev().addClass('block2'); //adicona o block ao botão clicado

[marcelo2605 10]

Agora funcionou, mas percebi uma coisa: como cada item abre um submenu, preciso manter o block no item.

 

Por exemplo

 

menu1: brasil, alemanha, itália

 

Se eu clicar em brasil, aparece o block. se depois clicar em alemanha, o block desaparece de brasil e aparece em alemanha.

 

Até aí beleza. Mas o problema é que ao clicar em brasil, abre-se o menu 2. Se eu clico em algum item do menu2, o block do brasil também desaparece.

 

Tem alguma maneira de mantê-lo? Os menus estão em divs separadas.

[William Bruno 1501]

Se eu clico em algum item do menu2, o block do brasil também desaparece.

então o erro está no click do menu2.

 

Corrija.

 

 

Tem alguma maneira de mantê-lo?

tem sim.

 

Preciso entender melhor o layout e quais outros códigos você está usando.

[marcelo2605 10]

William, o layout é simples. São divs contendo listas:

 

           <div id="continentes">
       	<ul>
           	<li><div></div><a href="#america_sul">América do Sul</a></li>
               <li><div></div><a href="#america_norte">América do Norte</a></li>
               <li><div></div><a href="#europa">Europa</a></li>
               <li><div></div><a href="#africa">África</a></li>
               <li><div></div><a href="#asia">Ásia</a></li>
               <li><div></div><a href="#australia">Austrália</a></li>
           </ul>
       	</div>

 

Essa é a primeira lista, a segunda é semelhante, alterando apenas no href dos itens e o id da div principal.

 

Por exemplo: o href #america_sul abre a div com esse id.

 

Para abrir a lista seguinte (no exemplo acima), uso este script:

 

var $america_sul = $('#continentes ul li a').eq(0);
$america_sul.click(function(){
	$('#map').load('mapas.html #map1');	
});

 

O que eu preciso é que o block apareça apenas no item clicado dentro de cada lista, mas se mantenha ao clicar em um item da segunda lista.

[William Bruno 1501]

desculpe, mas pelos scripts apresentados, não tem nenhum motivo para o block sair.

 

 

por isso que eu disse q preciso ver o restante, ou seja, o todo. Se não não consigo analisar, já que chegamos a este estágio.

[marcelo2605 10]

William, a idéia é fazer um menu parecido com esse

 

http://www.hochtief.com/hochtief_en/map

 

Veja que se eu alterno os continentes, o a seta acompanha o click. Mas se eu clico em um item da segunda coluna, a seta permanece no item da primeira coluna que abriu a segunda coluna.