submenú de visualización de jquery mientras Moushover - javascript, php, jquery, html, css

Tengo un menú horizontal. Este submenú se muestra fuera de la ul. Cuando muevo el mouse sobre una clase específica, quiero que aparezca el menú .sub_menu. Cuando muevo el .sub_menu, quiero que todavía esté allí.

Sin embargo, al mover mi mouse desde el menú_sub, desaparece.

jQuery(document).on("click", ".mobile-sub-menu-controller", function () {
jQuery(this).siblings(".sub-menu").slideFadeToggle();
if (jQuery(this).find("i").hasClass("icon-angle-down")) {
jQuery(this).find("i").removeClass("icon-angle-down");
jQuery(this).find("i").addClass("icon-angle-up");
} else {
jQuery(this).find("i").removeClass("icon-angle-up");
jQuery(this).find("i").addClass("icon-angle-down");
}
});

Respuestas

En

jQuery(document).on("click", ".mobile-sub-menu-controller", function () { ..

cambiar click para "mouseenter", porque "mouseover" activará el evento para cada unidad de movimiento que mueva el cursor a través del objetivo.

Creo que puede adjuntar un observador para ambos elementos (elemento de menú y submenú) y decidir con la clase que debe usar en ambos observadores.

Sin embargo, es su menú tiene la estructura como esta:

<ul>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
...
<ul>

Puede usar eventos css o mouseenter / mouseleave para alternar la clase de elemento del menú para mostrar el submenú.

Tenga cuidado, si hay un espacio entre el elemento de menú y el submenú, su css o js funcionarán incorrectamente porque el mouse dejará el elemento de menú al otro elemento pero no al submenú.

Si tienes alguna información adicional o preguntas, házmelo saber.

También puede adjuntar el código html del menú para aclarar la pregunta.