jQuery Hover菜单-将鼠标悬停在子菜单上时-菜单消失 [英] jQuery Hover Menu - When hovering over child - menu disappears

问题描述

因此，我创建了一个简单的小悬停，它使用链接中的类在下面显示div.

So I created a simple little hover, that uses a class from a link to show a div underneath.

显示/隐藏效果很好，但是我不知道如何设置它，以便如果鼠标悬停在div上，它将不会隐藏.我尝试使用(this)和.hover，但没有成功.

The show/hide works fine, but I can't figure out how to set it so that if the mouse is over the div, it wont hide. I tried using (this) and .hover, with no success.

这是我的代码:

$(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上，请清除计时器.

You can use clearTimeout(postTimer1) to stop the timer from executing. So if the user hovers over #dropdown1, clear the timer.

也许是这样的:

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

这篇关于jQuery Hover菜单-将鼠标悬停在子菜单上时-菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！