jQuery悬停菜单 – 当鼠标悬停在菜单上时 – 菜单消失

所以我创建了一个简单的小悬停,它使用链接中的一个类来显示下面的div.

显示/隐藏工作正常,但我无法弄清楚如何设置它,以便如果鼠标在div上,它不会隐藏.我尝试使用(this)和.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);        
        }
    );
});

解决方法

您可以使用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)
    }
  )
})