如何在徘徊時保持觸發div擴展？

Question

所以我有一個設置，在一個div上懸停觸發一個單獨的div來展開。我按預期工作，但遇到了一些困難。

這裏是一個工作示例： http://jsfiddle.net/9rshL6hk/

---

兩個問題：

• 如果您快速懸停來回所有按鈕＃div的，那麼隊列積聚。它可以在每個按鈕的基礎上正常工作，但在快速懸停在多個元素上時會崩潰。
• 這是一個有點棘手的解釋。基本上我想將鼠標移動到展開的子菜單div中，而不是立即收縮。下面的增強描述。

（希望達到：當鼠標離開「按鈕1」格，然後將「子菜單1」的div將保持擴張，但它就會一直只在鼠標仍然在徘徊擴大了「子菜單1' 格。基本上只是擴展的屬性‘按鈕1’的div到‘子菜單1’，使其可以保持打開狀態就像你使用任何典型的鍵/子菜單設置的期望。）

---

jQuery

$("#button1").data("panelId", "#submenu1"); 
$("#button2").data("panelId", "#submenu2"); 
$("#button3").data("panelId", "#submenu3"); 

$("#button1, #button2, #button3").hover(function() { 
    var first = true; 
    var panelId = $(this).data("panelId"); 
    $(".chain").not(panelId).slideUp(function() { 
     if (first) { 
      first = false; 
      $(panelId).stop().slideToggle(400); 
     } 
    }); 
}); 

---

HTML

<div id="button1">Button 1</div> 
<div id="button2">Button 2</div> 
<div id="button3">Button 3</div> 

<div id="submenu1" class="chain">Submenu 1</div> 
<div id="submenu2" class="chain">Submenu 2</div> 
<div id="submenu3" class="chain">Submenu 3</div> 

---

CSS

#button1,#button2,#button3 { 
    display:inline; 
    background-color:LightBlue; 
    margin:2px; 
    font-size:30px; 
} 

.chain {display:none;} 

#submenu1 { 
    background:red; 
    width:200px; 
    height:100px; 
} 
#submenu2 { 
    background:blue; 
    width:300px; 
    height:200px; 
} 
#submenu3 { 
    background:orange; 
    width:400px; 
    height:300px; 
} 

Answer 1

試試這個代碼 對於你的第二問題 - Working Demo Click Here

將您的hover事件更改爲mouseenter，如下所示。

$(document).ready(function() { 
    $("#button1").data("panelId", "#submenu1"); 
    $("#button2").data("panelId", "#submenu2"); 
    $("#button3").data("panelId", "#submenu3"); 

    $("#button1, #button2, #button3").mouseenter(function() { 
     var first = true; 
     var panelId = $(this).data("panelId"); 
     $(".chain").not(panelId).slideUp(function() { 
      if (first) { 
       first = false; 
       //alert('sdfddsfs'); 
       $(panelId).stop().slideToggle(400); 
      } 
     }); 
     setTimeout(function(){ // UPDATED - FOR CLEAR THE QUEUE 
     //$(".chain").stop(false,true); 
     $(".chain").finish(); // you can use either .stop() or .finish()    
     },400); 
    }); 

    $(".chain").mouseenter(function() { 
      //alert('sdf'); 
     $(this).slideDown(400); 
    }); 
    $(".chain").mouseout(function() { 
      //alert('sdf'); 
     $(this).slideUp(400); 
    }); 
}); 

見更新答案爲上面的代碼。

更新回答： -使用.finish()來清除動畫隊列。