Menu desplegable con botonera y slideToggle

jotajotaplapo · #1 (**permalink**) 05/12/2014, 09:54

Hola,

mi duda es la siguiente... resulta que estoy armando la estructura básica para un menú horizontal desplegable que al abrirse empuje todo lo que hay bajo el. Estoy utilizando SlideToggle para abrir y cerrar el menú.

El problema es que tengo diferentes botones que despliegan cada uno un div asociado. Cuando despliego el primer botón (o el boton que sea) se abre el div correspondiente sin problemas. El problema aparece cuando pincho otro botón para desplegar un nuevo menú, quedan los dos menús abiertos.

Lo que quiero lograr es que cuando pinche otro botón se cierre el que ya se encuentra desplegado.

Soy principiante en Jquery, imagino que solo me falta algo pequeño en el js.

Les dejo el codigo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>

<script src="jquery-1.8.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#boton1').click(function() {
		$('#contenidomenu1').slideToggle(300);
	});
	
	$('#boton2').click(function() {
		$('#contenidomenu2').slideToggle(300);
	});
	
	$('#boton3').click(function() {
		$('#contenidomenu3').slideToggle(300);
	});
	
});
</script>
</head>

<body>

<div id="botonera" style="background:transparent;display:block;width:100%;height:40px;">
    <div id="boton1" style="background:yellow;display:block;width:100px;height:40px; color:white; float:left;" onclick="">Boton</div>
    <div id="boton2" style="background:green;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
    <div id="boton3" style="background:orange;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
</div>

<div id="cuerpomenu" style="background:grey;width:100%;height:auto;">

    <div id="contenidomenu1" style="background:black;display:none;width:100%;height:300px;"></div>
    <div id="contenidomenu2" style="background:blue;display:none;width:100%;height:300px;"></div>
    <div id="contenidomenu3" style="background:orange;display:none;width:100%;height:300px;"></div>

</div>

<div id="cuerpositio" style="background:red;width:100%;height:300px;">
	<p>AQUI VA EL CONTENIDO DE LA WEB</p>
</div>

</body>
</html>

andresgarciadev · #2 (**permalink**) 05/12/2014, 14:58

podrias hacer algo como esto
http://jsfiddle.net/z990se9o/
que crea una funcion que oculta todos los div dentro de cuerpomenu antes de abrir el seleccionado
aun asi te recomiendas que veas como mejorar tu codigo, mira como usar atributos data y generalizar mas tu codigo para reutilizarlo no crear un .click() para cada uno

marlanga · #3 (**permalink**) 07/12/2014, 12:19

Esto ahora se hace con CSS3 puro. Javascript se limita a meter o quitar clases nada mas.

Para la animacion se usa el animatin: height, para que la capa pinchaza aparezca por encima, he usado el z-index, y para que los submenus no desplacen el contenido de abajo, solo había que meterl divs positon absolute en un div position relativo de dentro del menú.

http://jsfiddle.net/marlanga/z990se9o/2/

CHuLoSoY · #4 (**permalink**) 10/12/2014, 03:47

Aunque las mejores soluciones serían rehacer el código como te dicen arriba, te propongo una solución simple para tu código:

Código Javascript:

Ver original$(document).ready(function() {
var activo = undefined; //guardaremos aquí el activo
 
    $('#boton1').click(function() {
        $('#contenidomenu1').slideDown(300);
                $('#contenidomenu'+activo).slideUp(300);
    });
    
    $('#boton2').click(function() {
        $('#contenidomenu2').slideDown(300);
                $('#contenidomenu'+activo).slideUp(300);
    });
    
    $('#boton3').click(function() {
        $('#contenidomenu3').slideDown(300);
                $('#contenidomenu'+activo).slideUp(300);
    });
    
});

De todas formas, ese código es una locura mantenerlo. Lo tendrías muchísimo más fácil si utilizaras la propiedad "rel" o algún invento parecido:

Código HTML:

Ver original<div id="botonera" style="background:transparent;display:block;width:100%;height:40px;">
    <div class="boton" rel="1" style="background:yellow;display:block;width:100px;height:40px; color:white; float:left;" onclick="">Boton</div>
    <div class="boton" rel="2" style="background:green;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
    <div class="boton" rel="3" style="background:orange;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
</div>
 
<div id="cuerpomenu" style="background:grey;width:100%;height:auto;">
 
    <div class="contenidomenu" rel="1" style="background:black;display:none;width:100%;height:300px;"></div>
    <div class="contenidomenu" rel="2" style="background:blue;display:none;width:100%;height:300px;"></div>
    <div class="contenidomenu" rel="3" style="background:orange;display:none;width:100%;height:300px;"></div>
 
</div>

ASí podrías detectar el click del botón:

Código Javascript:

Ver originalvar activo = undefined;
$('.boton').on('click', function(e) {
      e.preventDefault();
      $('.contenidomenu[rel='+$(this).attr('rel')+']').slideDown(250); // $(this).attr('rel') te devuelve el atributo REL
      if(activo !== undefined)  {
           $('.contenidomenu[rel='+activo+']').slideUp(250); // aquí se oculta el activo
      }
      activo = $(this).attr('rel');
});