Foros del Web » Programando para Internet » Javascript »

Ocultas listas en un menu al hacer click

Estas en el tema de Ocultas listas en un menu al hacer click en el foro de Javascript en Foros del Web. Mi menu funciona actualmente de la siguiente: muestra las categorias en una fila, al hacer click en una de ellas se despliegan las subcategorias. Lo ...
  #1 (permalink)  
Antiguo 28/04/2008, 16:29
 
Fecha de Ingreso: enero-2008
Ubicación: Lima - Perú
Mensajes: 1.127
Antigüedad: 16 años, 3 meses
Puntos: 10
Ocultas listas en un menu al hacer click

Mi menu funciona actualmente de la siguiente: muestra las categorias en una fila, al hacer click en una de ellas se despliegan las subcategorias.
Lo que quiero hacer hacer es que el despliege solo se haga una vez, por ejemplo si tengo 2 categorias hardware y software, si clikeo software se desplieguen sus subcategorias y si clickeo hardware se despliguen sus categorias pero que se oculten las subcategorias desplegadas anteriormente.
Espero me haya dejado entender aqui dejo mi codigo completo haber si me ayudan con la funcion en js

Código PHP:
<html> 
<head> 
<script> 
function desplegar(id_div) 

    var capa = document.getElementById(id_div); 
     
    if(capa.style.display == 'none') 
    { 
        capa.style.display = 'block'; 
    } 
    else 
    { 
        capa.style.display = 'none'; 
    } 

</script> 
</head> 
<body>  
<h1>Productos</h1>  
<?php  
$conexion 
mysql_connect('localhost','root','');  
mysql_select_db('MENU');  

$consultaCategorias mysql_query("SELECT * FROM categoria;");  
$menu_numero 0
while(
$categorias mysql_fetch_array($consultaCategorias))  
{  
    echo 
'<a href="#" onclick="desplegar(\'menu_'.$menu_numero.'\'); return false;">'.$categorias[nomcateg].'</a><br />';  
      
    
$consultaProductos mysql_query("SELECT * FROM producto WHERE codcateg = {$categorias[codcateg]};");  
    echo 
'<div id="menu_'.$menu_numero.'" style="display:none;">'
    while(
$productos mysql_fetch_array($consultaProductos))  
    {  
        echo 
'<a href="#">'.$productos[descripcion].'</a><br />';  
    }  
    echo 
'</div>'
    
$menu_numero++; 
}    

mysql_free_result($consultaCategorias);  
mysql_close($conexion);  
?>  
</body>  
</html>
  #2 (permalink)  
Antiguo 29/04/2008, 01:35
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Ocultas listas en un menu al hacer click

Hola,

Pásanos el código son el PHP, por que como comprenderás no dispongo de tu BBDD para probarlo.

De todas formas yo lo que haría sería mirar en que estado se encuentran los dos desplegables. Si pulsas en el primero y ninguno está desplegado desplegas el primero. Si pulsas el primero y el segundo está desplegado, replegas el segundo y desplegas el primero. Y así con todos los casos posibles.

Insisto, si nos pones el código sin el PHP te podremos retocar el código si no te aclaras.
  #3 (permalink)  
Antiguo 01/05/2008, 11:50
 
Fecha de Ingreso: enero-2008
Ubicación: Lima - Perú
Mensajes: 1.127
Antigüedad: 16 años, 3 meses
Puntos: 10
Re: Ocultas listas en un menu al hacer click

Bueno ahi dejo la bd para q prueben el codigo
create table producto
(
codprod int(5)not null auto_increment primary key,
descripcion text not null,
precio numeric(6,2)not null,
codcateg char(02)not null
);

create table categoria
(
codcateg int(02)not null auto_increment primary key,
nomcateg varchar(30)not null
);

insert into categoria values('01','hardware');
insert into categoria values('02','software');

insert into producto values('00001','procesador',150,'01');
insert into producto values('00002','lectoras',35,'01');
insert into producto values('00003','windowsXP',180,'02');
insert into producto values('00004','MSSQLSERVER2000',250,'02');
  #4 (permalink)  
Antiguo 07/05/2008, 02:00
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Ocultas listas en un menu al hacer click

Perdona, en mi anterior pos t te quise decir que nos pasaras la página SIN el PHP, una vez ya se ha generado. Pero bueno, intentaré hacerlo así.
  #5 (permalink)  
Antiguo 07/05/2008, 02:33
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona
Mensajes: 289
Antigüedad: 16 años, 4 meses
Puntos: 8
Re: Ocultas listas en un menu al hacer click

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:
<html>  
<
head>  
<
script>

var 
desplegado false;
  
function 
desplegar(id_div)  
{
    if(
desplegado)
    {
        var 
divisiones document.getElementsByTagName("div") ;
        for (
0divisiones.lengthi++)
        {
            
divisiones[i].style.display "none";
            if(
divisiones[i].id == id_div)
                
capa divisiones[i];
        }
        
capa.style.display 'block';
        
desplegado true;
        
    }
    else
    {
        var 
capa document.getElementById(id_div);  
          
        if(
capa.style.display == 'none')  
        {  
            
capa.style.display 'block';
            
desplegado true;
        }  
        else  
        {  
            
capa.style.display 'none';
            
desplegado false;  
        }
    }  
}  
</script>  
</head>  
<body>   
<h1>Productos</h1>   
    <a href="#" onclick="desplegar('menu_1'); return false;">Hardware1</a><br>       
    <div id="menu_1" style="display:none;">  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br> 
    </div>
    <a href="#" onclick="desplegar('menu_2'); return false;">Hardware2</a><br>
    <div id="menu_2" style="display:none;">  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br> 
    </div>
    <a href="#" onclick="desplegar('menu_3'); return false;">Hardware3</a><br>
    <div id="menu_3" style="display:none;">  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br> 
    </div>
    <a href="#" onclick="desplegar('menu_4'); return false;">Hardware4</a><br>
    <div id="menu_4" style="display:none;">  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>  
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br>
        <a href="#">Producto</a><br> 
    </div>     
</body>   
</html>

He rellenado los menus con links pero si pones tu PHp tal y como lo tenías creo que funcionará. Si no te va vuelve a postear y lo miramos a ver. 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:01.