Ir para conteúdo

Arquivado

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

TiagoArabe

Menu Sanfona

Por , em Javascript

Recommended Posts

TiagoArabe    0

TiagoArabe
Postado

Olá gente.

 

Estou com o seguinte Javascript para o meu menu:

$(function(){
	$("li ul").hide();
	$("li ul:first").show();
	
	$("ul li a").click(function(){
		$("li ul").slideUp();
		$(this).next().slideToggle();
	})
})

E o HTML é assim:

<div id="menu">
			<h1>Menu Principal »</h1>
			<ul>
				<li><a href="#">Menu 1 »</a>				
					<ul>
						<li><a href="#">» Submenu 1.1</a></li>
					</ul>
				</li>
				<li><a href="#">Menu 2 »</a>					
					<ul>
						<li><a href="#">» Submenu 1.2I</a></li>
					</ul>
				</li>
			</ul>
</div>

O problema é o seguinte: Quando eu clico no link "Submenu 1.2" ele não fica com o "Menu 2" aberto, ele fecha esse menu e abre o" Menu 1". Isso acontece sempre.

 

Eu sei que o Javascript está configurado para sempre deixar aberto o primeiro menu, porém eu gostaria que, por exemplo, se a pessoa clicasse no "Submenu 1.2" ele continuasse com o "Menu 2" aberto, entende?

 

Como eu posso fazer isso acontecer? Alguma luz?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Isis_    202

_Isis_
Postado

Dei uma alterada nos códigos...

 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script>
            $('#menu').ready(function(){
                $('#menu-container > li > ul').hide();
                $("#menu-container > li > a").click(function(){
                      $(this).next().slideToggle();
                 });
             });
         </script>
         <title></title>
      </head>
       <body>
            <div id="menu">
                   <h1>Menu Principal »</h1>
                    <ul id="menu-container">
                           <li><a href="#">Menu 1 »</a> 
                                 <ul>
                                        <li><a href="#">» Submenu 1.1</a></li>
                                 </ul>
                            </li>
                             <li><a href="#">Menu 2 »</a> 
                                  <ul>
                                      <li><a href="#">» Submenu 1.2I</a></li>
                                  </ul>
                              </li>
                          </ul>
                   </div>
             </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito