jquery - desplegar - menu desplegable al pasar el mouse bootstrap

jQuery Hover Menu-Al pasar el cursor sobre el elemento secundario-el menú desaparece

Question

Así que creé un pequeño hover, que usa una clase de un enlace para mostrar un div debajo.

El show / hide funciona bien, pero no puedo encontrar la manera de configurarlo para que, si el mouse está sobre el div, no se oculte. Intenté usar (esto) y .hover, sin éxito.

Aquí está mi código:

$(document).ready(function()
{
// hide all dropdown
$("#dropdown1").hide();
//hover show dropdown
$(".menu-level-one").hover(
function () {
$("#dropdown1").show();
},
function () {
var postTimer1 = setTimeout(function(){ $("#dropdown1").hide(); }, 1000);
}
);
});

Answer 1

Puede usar clearTimeout(postTimer1) para detener la ejecución del temporizador. Por lo tanto, si el usuario se desplaza sobre #dropdown1 , borre el temporizador.

Tal vez algo como esto:

$(document).ready(function() {
var hideTimer = null
var dropdown = $("#dropdown1", this)
var menu = $(".menu-level-one", this)
dropdown.hide();
$([dropdown[0], menu[0]]).hover(
function() {
if (hideDropdownTimer)
clearTimeout(hideDropdownTimer);
dropdown.show();
},
function() {
if (hideDropdownTimer)
clearTimeout(hideDropdownTimer);
hideDropdownTimer = setTimeout(function() {
dropdown.hide()
}, 300)
}
)
})