jQuery Hover Menu - 当悬停在子菜单上时 - 菜单消失答案

【问题标题】：jQuery Hover Menu - When hovering over child - menu disappearsjQuery Hover Menu - 当悬停在子菜单上时 - 菜单消失
【发布时间】：2009-01-07 04:44:26
【问题描述】：

所以我创建了一个简单的小悬停，它使用链接中的类来显示下面的 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);        
        }
    );
});

【问题讨论】：

我认为如果您也包含相关的 html 可能会有所帮助，以便我们知道您在操作什么。

标签： jquery

【解决方案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)
    }
  )
})

【讨论】：