如何在徘徊时保持触发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()来清除动画队列。