[SOLUCIONADO] No me funciona Menu jQuery

k3admm · #1 (**permalink**) 02/02/2012, 12:38

Como hago para que me funcione bien de este modo. El problema es en el body, cuando agrego en el div(id=firstpane) "<table><tbody><tr><td>" no funciona correctamente, el menu tendria que abrir y cerrar el que esta abierto pero no me funciona por el "<td>" si le quito solo el "<td>" funciona correctamente pero si se lo dejo no funciona. Ya se que me van a decir que se lo quite pero no puedo necesito que funcione así, no se que mas debo agregar en jQuery para que funcione. Ayudenme porfavor.

Código HTML:

<html> 
<head>
<title>Menu </title>
<meta charset="utf-8">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<script language="javascript">
$(document).ready(function(){
     $("#firstpane p.menu_head").click(function(){
          $(this).removeClass("menu_head").addClass("menu_head_open").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
          $(this).siblings().removeClass("menu_head_open").addClass("menu_head");
     });
     $("#firstpane2 p.menu_head").click(function(){
          $(this).removeClass("menu_head").addClass("menu_head_open").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
          $(this).siblings().removeClass("menu_head_open").addClass("menu_head");
     });
});
</script>
<style>
.menu_list {
	width: 360px; /* Ancho del menú */
	background-color:rgba(0,153,255,1);
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-webkit-border-top-right-radius:3px;
	-webkit-border-top-left-radius:3px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-topleft:0px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topright:3px;
	border-bottom-left-radius:0px;
	border-top-left-radius:0px;
	border-bottom-right-radius:3px;
	border-top-right-radius:3px;

}
.menu_list:hover { z-index:5; }
.menu_list table{
	width:100%;
}

.menu_head {
	padding: 5px 10px;
	color:#FFF; /* Color de las pestañas principales */
	cursor: default;
	position: relative;
	margin:1px;
	margin-left:0;
	margin-right:0;
	font-weight:bold;
	font-size:13px;
	background-color:transparent;
	background-image: url(../imgs/flecha-abajo.png);
	background-position:center right;
	background-repeat:no-repeat;
}
.menu_head:hover { background-color:rgba(4,82,128,.7); color:#FFFFFF; }
.menu_head_open {
	padding: 5px 10px;
	color:#FFF; /* Color de las pestañas principales */
	cursor: default;
	position: relative;
	margin:1px;
	margin-left:0;
	margin-right:0;
	font-weight:bold;
	font-size:13px;
	background-color:rgba(4,82,128,.7);
	background-image: url(../imgs/flecha-arriba.png);	
	background-position:center right;
	background-repeat:no-repeat;
}
.menu_body { display:none; background-color:rgba(4,82,128,.7); background-image:none; padding-left:20px; margin-top:-1px;}
.menu_body a{
	display:block;
	color:#FFF; /* Color de los enlaces */
	padding-top:8px;
	font-weight:bold;
	text-decoration:none;
	border-bottom:1px dotted #fff;
}
.menu_body a:hover{
	color: #fff; /* Color de los enlaces al pasar el cursor */
	border:1px dotted #FFF;
}
</style>
</head>

<body>
Con table
<div id="firstpane" class="menu_list">
<table>
<tbody>
 <tr>
  <td>
    <p class="menu_head">Menu 1</p>
        <div class="menu_body">
            <a href="#">Opc 1</a>  
            <a href="#">Opc 2</a>  
            <a href="#">Opc 3</a>  
            <a href="#">Opc 4</a>  
        </div>
  </td>
 </tr>
 <tr>
  <td>
    <p class="menu_head">Menu 2</p>
        <div class="menu_body">
        	<a href="#">Opc 1</a>
        	<a href="#">Opc 2</a>
        	<a href="#">Opc 3</a>
        </div>
  </td>
 </tr>
 <tr>
  <td>
	<p class="menu_head">Menu 3</p>
        <div class="menu_body">
            <a href="#">Opc 1</a>
            <a href="#">Opc 2</a>
            <a href="#">Opc 3</a>
            <a href="#">Opc 4</a>
        </div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<hr>
Sin table
<div id="firstpane2" class="menu_list">
    <p class="menu_head">Menu 1</p>
        <div class="menu_body">
            <a href="#">Opc 1</a>  
            <a href="#">Opc 2</a>  
            <a href="#">Opc 3</a>  
            <a href="#">Opc 4</a>  
        </div>
    <p class="menu_head">Menu 2</p>
        <div class="menu_body">
        	<a href="#">Opc 1</a>
        	<a href="#">Opc 2</a>
        	<a href="#">Opc 3</a>
        </div>
	<p class="menu_head">Menu 3</p>
        <div class="menu_body">
            <a href="#">Opc 1</a>
            <a href="#">Opc 2</a>
            <a href="#">Opc 3</a>
            <a href="#">Opc 4</a>
        </div>
</div>


</body>
</html>

maycolalvarez · #2 (**permalink**) 02/02/2012, 13:12

a mi me funciona perfecto en FF, ¿que es lo que no te funciona, y en que navegador lo estas probando?

la única diferencia es que el 2do menú actúa como accordion

k3admm · #3 (**permalink**) 02/02/2012, 15:14

Si funciona en ff, chrome y ie, pero quiero que el 1ro funcione como el 2do, el problema del 1ro es que tiene "table" y el 2do no, pero necesito que tenga "table tbody tr td", lo que no entiendo es porque no funciona con la tabla.

Naahuel · #4 (**permalink**) 03/02/2012, 06:56

Probá con este script:

Código Javascript:

Ver original$(document).ready(function(){
     $("p.menu_head").click(function(){
          $(this).removeClass("menu_head").addClass("menu_head_open").next("div.menu_body").slideToggle(300);
       //$(this).siblings().removeClass("menu_head_open").addClass("menu_head");// el problema es "siblings()"
         $('.menu_head').next("div.menu_body").slideUp();
         $('.menu_head_open').removeClass("menu_head_open").addClass("menu_head");
     });
});

El problema original era con el uso de "siblings". Este método se usa para seleccionar nodos hermanos. Como agregaste nodos, estos cambiaron y ya no funcionaron. No me tomé mucho trabajo de optimizar el código, no funciona bien pues es muy "general" al usar selectores con clases globales. Esto quiere decir que si abres un item en un menu y abres otro item en otro menu, el item que abriste anteriormente también se cerrará. Esto sería un problema si es que no querés que se comporte así o si tenés varios menús en una sola página.

k3admm · #5 (**permalink**) 07/02/2012, 21:39

Funciona excelente.

Se lo agradesco mucho.

Saludos.