jQuery Hover Menu - при наведении на ребенка - меню исчезает

Question

Итак, я создал простой маленький курсор, который использует класс из ссылки, чтобы показать div внизу.

Показать / скрыть работает нормально, но я не могу понять, как его настроить, чтобы, если мышь находится над элементом div, он не скрывался. Я пытался использовать (это) и .hover, но безуспешно.

Вот мой код:

$(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

Вы можете использовать clearTimeout(postTimer1), чтобы остановить выполнение таймера. Поэтому, если пользователь наводит курсор на #dropdown1, сбросьте таймер.

Может быть, что-то вроде этого:

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