estoy intentando probar una lista en la que al clickar sobre uno de los elementos se despliega otra lista con elementos. Esto me sale bien, pero quería probar a hacer que al clickar sobre un elemento de la lista ul se abran los elementos de la lista ol pero de uno en uno - saldría despliega1, despliega2,.. siempre con animación- y saliendo desde abajo, no lateralmente como me sale ahora. Así sucedería que al clickear sobre cualquier elemento de la lista ul se desplegarían una serie de elementos, tal como he comentado anteriormente, y se cerrarían los desplegados del anterior - esto creo que lo he logrado también con la función mouseup. No sé si la mejor forma de hacerlo es con la propiedad animate, pero es que con otras no lo he logrado por ahora tampoco. El código que tengo es:
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Pestañas</title>
<style type="text/css">
ul, li, p, a, ol{margin:0;padding:0;font-family: helvetica, sans-serif;box-sizing: border-box;}
ul{
width:100%;
height: 3em;
line-height: 3em;
position: absolute;
left: 0;
bottom: 0;
background-color: #666;
color: #fff;
text-align: center;
}
ul li{
width: auto;
display: inline-block;
padding: 0 2%;
font-size: 1em;
text-transform: uppercase;
font-weight: 800;
letter-spacing: .1em;
cursor: pointer;
border-right: 1px solid #fff;
}
ul li:hover{
opacity: .8;
}
ul li:first-child{
border-left: 1px solid #fff;
}
ol{
width:100%;
position: absolute;
left: 0;
bottom: 3em;
text-align: center;
color: #fff;
display: none;
}
ol li{
width: auto;
height: 6em;
line-height: 6em;
display: inline-block;
padding: 0 1%;
border-radius: 3px 3px 0 0;
background-color: brown;
}
</style>
</head>
<body>
<ol>
<li>despliega 1</li>
<li>despliega 2</li>
<li>despliega 3</li>
</ol>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li').click(function() {
$("ol").animate({
width: "show"
}, 1000);
});
});
//si clickamos fuera se cierra el desplegable anterior
$(document).mouseup(function (e){
var container = $("ol");
if (!container.is(e.target) && container.has(e.target).length === 0){
$(this).animate({
width: "hide"
});
}
});
</script>
</body>
</html>
