Tengo un mega menú que necesita mostrar y ocultar submenús en 3 capas.
Cuando uso jquery toggle , funciona bien para abrir y ocultar el segundo submenú (segunda columna), pero cuando uso el mismo código para abrir y ocultar el tercer submenú (tercera columna), se abre pero nunca se oculta.
¿Alguien sabe cuál parece ser el problema?
Quiero tener:
haga clic en la opción 1 => mostrar la opción 1.1
haga clic en la opción 1.1 => mostrar la opción 1.1.1
segundo clic en la opción 1 => ocultar la opción 1.1 y la opción 1.1.1
segundo clic opción 1.1 => ocultar opción 1.1.1
código HTML:
<div> <!-- FIRST COLUMN --> <div> <a class="first-link" href="#">option 1</a> <a class="second-link" href="#">option 2</a> </div> <!-- SECOND COLUMN --> <div class="submenu-1 option" style="display:none;"> <div> <a class="submenu-first-element" href="#">option 1.1</a> </div> <div> <a class="submenu-second-element" href="#">option 1.2</a> </div> </div> <div class="submenu-2 option" style="display:none;"> <div> <a class="submenu-2-first-element">option 1.1</a> </div> </div> <!-- THIRD COLUMN --> <div class="first-preview hide-div" style="display:none;"> <a>option 1.1.1</a> </div> <div class="second-element hide-div" style="display:none;"> <a>option 1.1.2</a> </div> <div class="third-element hide-div" style="display:none;"> <a>option 1.2.1</a> </div> </div>codigo jquery:
//second column $('.first-link').on('click', () => { $('.option').hide(); $('.submenu-1').toggle(); }); $('.second-link').on('click', () => { $('.option').hide(); $('.submenu-2').toggle(); }); //third column $('.submenu-first-element').on('click', () => { $('.hide-div').hide(); $('.first-preview').toggle(); }); $('.submenu-first-element').on('click', () => { $('.hide-div').hide(); $('.second-element').toggle(); }); $('.submenu-second-element').on('click', () => { $('.hide-div').hide(); $('.third-element').toggle(); });Supongo que esto es lo que esperabas. Mueva sus divs más cerca del padre y con un evento de un clic puede lograr ambos.
//second column $('.first-link').on('click', () => { //$('.option').hide(); $(".submenu-2").hide(); $('.submenu-1').toggle(); }); $('.second-link').on('click', () => { //$('.option').hide(); $(".submenu-1").hide(); $('.submenu-2').toggle(); }); //third column $('.submenu-first-element').on('click', () => { //$('.hide-div').hide(); $('.first-preview').toggle(); $('.second-element').toggle(); }); //on single click it can be done, no need to repeat the function //$('.submenu-first-element').on('click', () => { // $('.hide-div').hide(); //}); $('.submenu-second-element').on('click', () => { //$('.hide-div').hide(); $('.third-element').toggle(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <!-- FIRST COLUMN --> <div> <a class="first-link" href="#">option 1</a> <a class="second-link" href="#">option 2</a> </div> <!-- SECOND COLUMN --> <div class="submenu-1 option" style="display:none;"> <div> <a class="submenu-first-element" href="#">option 1.1</a> </div> <div class="first-preview hide-div" style="display:none;"> <a>option 1.1.1</a> </div> <div class="second-element hide-div" style="display:none;"> <a>option 1.1.2</a> </div> <div> <a class="submenu-second-element" href="#">option 1.2</a> </div> <div class="third-element hide-div" style="display:none;"> <a>option 1.2.1</a> </div> </div> <div class="submenu-2 option" style="display:none;"> <div> <a class="submenu-2-first-element">option 1.2</a> </div> </div> <!-- THIRD COLUMN --> </div>El problema es que está ocultando sus opciones antes de cambiar. Toma esto como un ejemplo:
$('.first-link').on('click', () => { $('.option').hide(); $('.submenu-1').toggle(); });Primer clic
1.1. Ocultar todos los divs con la option de nombre de clase.
1.2. Alterne el submenú-1, es decir, mostrar (porque lo oculta en el paso 1.1.1).
Segundo clic
2.1. Ocultar todos los divs con la option de nombre de clase.
2.2. Alterne el submenú-1, es decir, mostrar, nuevamente porque lo oculta en el paso 2.1.