jQuery：如何實現這種推出效果？

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元素移至popup元素，這將防止Popup關閉。 清除超時方法會阻止執行超時功能。

Answer 2

詳盡的教程： 下拉菜單

Answer 3

我已經創建了類似的解決方案，您可以在此處查看 。 在此處查看演示 。

Answer 4

順便說一句， :hover不是jQuery-它是CSS。 http://www.w3schools.com/cssref/sel_hover.asp