I'm making a dropdown menu with jQuery and I have the following:
(function ($) {
$(document).ready(function () {
$('ul li:has(ul)').click(
function (e) {
$(this).find('ul').css({ display: "block" });
},
function (e) {
$(this).find('ul').css({ display: "none" });
}
);
$('#MainMenu > ul > li > a').click(function () {
$('#MainMenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#MainMenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
})(jQuery);
ul li ul {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="MainMenu" class="active">
<ul>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Configuración</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Catálogo</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Líneas</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Grupos</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Tipos de proveedor</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Grupo de cliente</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Tipo de movimiento</a></li>
<li class="last"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Sucursales</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Parámetros</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Utilerías</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Procesos de cálculos</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Procesos de cierres</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Reintegraciones</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Usuarios</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Configuración de usuarios</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Perfiles</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Seguridad</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-folder-open"></span> Catálogos</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Compras</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Ventas</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Clientes</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Inventarios</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Logística</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Contabilidad</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Informes</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Empleados</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Equipos</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Logística</a>
<ul>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Modulo de logística</a></li>
<li><a href="#"><span class="glyphicon glyphicon-triangle-bottom"></span> Envios y entregas</a></li>
</ul>
</li>
</ul>
</div>
Everything works perfectly except the subitems under "Settings > Catalog" which are not displayed and I still have no idea why.
The problem is that only the first level of the menu is checked when clicking (
#MainMenu > ul > li > a
), so subsequent levels are not taken into account. For example, that selector causes "Settings" to open, but it doesn't apply to "Catalog" (because that would require something like#MainMenu > ul > li > ul > li > a
).A possible solution would be to make the selector more generic so that it selects any link within
#MainMenu
and not just the first level, to do this remove the>
and leave it in#MainMenu ul li a
.Apart from that, you could simplify the code considerably (and surely it can be simplified even more), although I don't know if that additional code is needed for other things or not. A stripped down version with the more generic selector and removing unnecessary code: