Question

我需要一些帮助才能实现此滚动翻转效果。

这是屏幕截图：http://dl.dropbox.com/u/72686/roll-over-out.png

我有一个菜单。当我滚动“产品”项时，弹出框会出现在它下面，其中包含一个包含所有产品的树。

<div id="menu">
   <div id="product"> Roll over here </div>
   ...
</div>

<div id="popup">
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  ...
</div>

这个块有css：

#popup {
position:fixed
display:none
}

现在，很清楚如何实现翻转来显示块：

("#product").mouseover(function() { 
                $('#popup').css("display","block");
            })

但是我该如何处理推广？我有以下问题：

1）如果我在菜单项“#product”中添加转出，当我从它推出时（移动到带有产品树的弹出窗口），我让最后一个消失（因为我是离开菜单项。）

2）如果我在弹出窗口中添加推出功能，我的孩子就会遇到问题。即如果我将鼠标移到树的一个链接上，弹出窗口就会消失（因为我要离开父级#popup）。

感谢

PS。我无法使用：hover（Drupal CMS上的jquery版本不支持）。

Answer 1

首先，我认为你会发现mouseenter和mouseleave对于这类事情来说是更好的事件。请参阅IE中的jQuery示例，了解原因，不是一个大问题，但最终可能会闪烁，否则就会闪烁。

然而，这仍然无法解决您的问题。我建议使用setTimeout来关闭菜单，然后如果你的鼠标在超时之前进入菜单取消超时：

var t;
$("#product").mouseleave(function() { 
            t = setTimeOut(function(){$('#popup').hide();}, 100);
        })

$("#popup").mouseenter(function() {
    if(t)
        {
            clearTimeout(t);
            t=null;
        }});

如果从product元素移动到弹出元素，这将阻止弹出窗口关闭。 clear timeout方法可以防止执行超时功能。

Answer 2

彻底的教程：Drop down menu

Answer 3

我创建了类似的解决方案，你可以check it out here。请参阅demo here。

Answer 4

顺便说一下，:hover不是jQuery - 它是CSS。 http://www.w3schools.com/cssref/sel_hover.asp

jQuery：如何实现这种推出效果？

4 个答案: