El problema que tengo es crear un submenú dentro de otro menú.
Demostración: DEMO EN VIVO (Importante, porque también se necesita CSS
$(function () { // Desktop Menu var categoriesMenu = $(".list-ausbildung-categories li"); var triggerMenu = $(".dropdown-submenuSide"); var highlightsList = $(".list-ausbildung-highlights"); var submenuList = $(".list-ausbildung-submenu"); $('.list-ausbildung-categories').on('click', 'li', function () { if( $(this).hasClass('active') ){ triggerMenu.removeClass('asg-gray-bg-200'); $(".dropdown-submenuSide .list-ausbildung-submenu ul").html(''); } else { highlightsList.hide(); submenuList.show(); triggerMenu.addClass('asg-gray-bg-200'); $('li.active').removeClass('active'); $(this).addClass('active'); var subMenu = $(this).find(".dropdown-submenu").html(); $(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu); } }); $('.asg-megamenu div[class^="col"]:first-child').on('click', function () { categoriesMenu.removeClass('active'); triggerMenu.removeClass('asg-gray-bg-200'); submenuList.hide(); highlightsList.show(); }); });Tengo este megamenú de Bootstrap, que también contiene un submenú (columna 2). Al hacer clic, debería ocultar la Columna 3 y mostrar los elementos del submenú. (hace su trabajo)
Actualmente, estoy tomando el contenido del submenú con jquery html() y luego colocándolo en la tercera columna (probablemente no sea el método más limpio).
El problema: cada vez que cierro un submenú y hago clic de nuevo, no se vuelve a abrir.
Parece que actualmente, la clase activa no se elimina con el segundo clic. En cambio, simplemente borra el HTML de la columna tres. Podríamos arreglar eso agregando una línea para eliminar la clase activa cuando ocultamos el submenú.
if( $(this).hasClass('active') ){ $(this).removeClass('active'); // add in this line here so it will trigger properly on the next click triggerMenu.removeClass('asg-gray-bg-200'); $(".dropdown-submenuSide .list-ausbildung-submenu ul").html(''); }