Estoy tratando de hacer un menú desplegable con 3 niveles o más;
HTML
$(document).ready(function () { // Script del Navegador
$('#abrir').click(function () {
$(".cmenu").animate({ "left": "+124px" }, "slow");
},
function () {
$(".cmenu").animate({ "left": "0px" }, "slow"),
$('#abrir').css('display', 'none');
},
$('#cerrar').click(function () {
$(".cmenu").animate({ "left": "-127px" }, "slow");
$("ul.subnavegador").hide();
}
)
);
$("ul.subnavegador").hide();
$("a.desplegable").toggle(
function () {
$(this).parent().find("ul.subnavegador").slideDown('fast');
},
function () {
$(this).parent().find("ul.subnavegador").slideUp('fast');
}
);
});
.cmenu
{
height: 300px;
width: 500px;
position: absolute;
top: 10px;
bottom: 40px;
left: -124px;
}
.menuoculto
{
height: 82px;
width: 28px;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
left: 150px;
top: 5px;
display:block;
}
.menuvisible
{
margin: auto;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
left: -30px;
top: 5px;
display:block;
}
.menu
{
height: 300px;
width: 127px;
top: 1px;
bottom: 40px;
background-repeat: no-repeat;
position: absolute;
}
.subnavegador{
width: 280px;
}
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta charset="UTF-8">
<title>Menú vertical desplegable con jQuery</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="conmenu" class="cmenu">
<div id="cerrar" class="menuvisible">←</div>
<div id="abrir" class="menuoculto">»</div>
<div class="menu">
<ul class="navegador">
<li><a href="#" title="Opción 1">Opción 1</a></li>
<li><a href="#" title="Opción 2">Opción 2</a></li>
<li><a href="#" class="desplegable" title="Opción 3">Opción 3</a>
<ul class="subnavegador">
<li><a href="#" class="desplegable" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-2.1" class="desplegable">Sub-Opción 3-2.1</a>
</li>
</ul>
</li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
<li><a href="#" class="desplegable" title="Opción 4">Opción 4</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
El problema que tengo es que cuando hago click para desplegar uno de los apartados, se despliegan todos los subapartados de este, automaticamente.
Aunque luego pueda cerrarlos y abrir individualmente.
¿Como podría evitar este problema?