Question

所以我有一个设置，将鼠标悬停在div上会触发一个单独的div来扩展。我按预期工作，但我遇到了一些困难。

以下是一个工作示例： http://jsfiddle.net/9rshL6hk/

两个问题：

如果你快速在所有Button＃div上盘旋，那么队列就会建立起来。它可以在每个按钮的基础上正常工作，但在快速悬停在多个元素上时会崩溃。
这个解释有点棘手。基本上我想将鼠标移动到扩展的子菜单div而不是让它立即缩小。以下增强说明。

（希望实现：一旦鼠标离开'按钮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;
}

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()清除动画队列。

如何在悬停时保持触发的div扩大？

1 个答案: