Question

我正在开发一个弹出菜单并遇到了一个小问题，我希望有人可以提供帮助。菜单在悬停时弹出，在弹出窗口外单击关闭它。这一切都很好。

我的问题是将div设置为在悬停时显示并在X秒后自动隐藏，除非用户在时间内悬停在框内。这意味着弹出窗口会隐藏自己，除非需要。

有人可以提供建议吗？我知道它将涉及setTimeout和clearTimeout，但我不确定如何在上下文中应用它们。

我目前的代码如下：

$('.links #links-schools a').bind('hover mouseenter', function() {

  var school     = $(this).text();

  $('.links #links-schools a').each(function() {
    $(this).removeClass("current-menu-item");
  });

  if(school == "Introduction") {

    $('.sublinks ul').hide();
    $('.links #links-schools ul').removeClass('right-border');

  } else {

    $(this).addClass("current-menu-item");

    var str        = $(this).parent().attr('class').slice(-3);
    var editedstr  = str.replace(/\D/g,"");

    $('.links #links-schools ul').addClass("right-border");
    $('.sublinks ul').hide();
    $('.sublinks img').show();
    $('.sublinks').show();

    $.ajax({
      url: "http://www.bbdclients.com/sac-active-wp/buildnav.php",
      type: "POST", 
      data: { parentschoolid: editedstr },
      dataType: 'text',
      success: function(data) { 

        if (data.toLowerCase().indexOf("home") >= 0 || data.length < 1) {
          $('.sublinks img').hide();
          $('.sublinks ul').hide();
          return false;
        }
        else {
          $('.sublinks ul').html(data);
          $('.sublinks img').hide();
          $('.sublinks ul').show();
        }
      }
    });

  }

  return false;   
});

Answer 1

你可以这样做：

$('.links #links-schools a').bind('hover mouseenter', function() {
    var idTimeout;

    // your code

    idTimeout = setTimeout(function() {
        $('#div-to-hide').hide();
    }, 5000);

    $('#div-to-hide').on('mouseenter', function() {
        clearTimeout(idTimeout);
    });
});

尝试一下，让我知道任何疑问。

希望它有所帮助！

jQuery只有在没有盘旋时才隐藏div

1 个答案: