所以我有一个设置,将鼠标悬停在div上会触发一个单独的div来扩展。我按预期工作,但我遇到了一些困难。
以下是一个工作示例: http://jsfiddle.net/9rshL6hk/
两个问题:
(希望实现:一旦鼠标离开'按钮1'div,那么'子菜单1'div将保持扩展。但只要鼠标仍悬停在'子菜单中,它将保持扩展1'div。基本上只是将'Button 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;
}
答案 0 :(得分: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()清除动画队列。