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>