3

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">&slarr;</div>
        <div id="abrir" class="menuoculto">&raquo;</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&oacute;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?

2
  • ¿Podrías poner un snippet funcional? He creado uno pero con tu código no termina de verse el problema.
    – Kiko_L
    el 7 feb. 2019 a las 13:50
  • @Kiko_L listo, se ve cuando se despliega la opcion3 el 7 feb. 2019 a las 13:55

1 respuesta 1

2

$(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();
    }
    )
);

/*$("a.desplegable").toggle(
    function () {
        $(this).parent().find("ul.subnavegador").slideDown('fast');
    },
    function () {
        $(this).parent().find("ul.subnavegador").slideUp('fast');
    }
);*/
$('.desplegable').click(function() {
	if ($(this).next('.subnavegador').is(":hidden")) {
  	$(this).next('.subnavegador').slideDown('fast');
  }
  else {
  $(this).next('.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;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="conmenu" class="cmenu">
    <div id="cerrar" class="menuvisible">&slarr;</div>
    <div id="abrir" class="menuoculto">&raquo;</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&oacute;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>

Tenías varios errores, he trabajado sobre tu código para darte una versión de lo que creo que querías que hiciese tu menú.

Lo primero de todo, he borrado de tu JS la siguiente línea:

$("ul.subnavegador").hide();

Aunque es correcta lo veo innecesario, puesto que mediante CSS podías tener ocultos todos los elementos con la clase .subnavegador, por lo que añadí en tu CSS dicha regla:

.subnavegador {
    width: 280px;
    display: none;
}

Lo otro que hice fue quitar la siguiente función. No tengo muy claro lo que querías conseguir, pero no estaba funcionando, además de que provocaba que los elementos 3 y 4 se mostrasen ocultos en un inicio:

$("a.desplegable").toggle(
    function () {
        $(this).parent().find("ul.subnavegador").slideDown('fast');
    },
    function () {
        $(this).parent().find("ul.subnavegador").slideUp('fast');
    }
);

En su lugar programé la siguiente función:

$('.desplegable').click(function() {
    if ($(this).next('.subnavegador').is(":hidden")) {
        $(this).next('.subnavegador').slideDown('fast');
    }
    else {
        $(this).next('.subnavegador').slideUp('fast');
    }
});

Lo que hago es asociar un evento click() a los elementos con la clase .desplegable luego compruebo si el elemento hermano siguiente (asegurándome de que se trata de la clase .subnavegador) se encuentra oculto o visible, desplegándolo o replegándolo según el caso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.