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)
    }
  )
})