Question

我试图在ul的mouseenter上滑下li元素，在mouseleave上它会滑动它的li元素。当我有不同数量的li元素时，当一个向上滑动它会自动导致其他ul

上的mouseenter

如何防止这种情况确保顺利扩展/折叠体验？

这是我到目前为止所尝试的，我使用悬停变量来设置一个标志，以便在接下来的2秒内，mouseenter不会导致崩溃/扩展

var hovering=0;
$("ul").mouseenter(function (e) {
    console.log(hovering + " " +  Math.random());
    setTimeout(function(){
        clearHover();
    }, 1000);

    if (hovering == 0) {
        hovering = 1;
        $(this).children("li").slideDown();
        $(".nav").not(this).find("li").slideUp();
    }
});

$("ul").mouseleave(function (e) {
    $(this).children("li").slideUp();
    hovering = 0;
});

function clearHover(){
    hovering = 0;
    console.log(hovering + " " + Math.random());
};

This is the fiddle

Answer 1

你的问题不在于它会自动打开另一个ul，你所有的ul都是100％宽度。难怪你在离开另一个时会将鼠标悬停在其中一个上面。尝试在css中添加它：

ul {width: 50px;}

Answer 2

如果您将ul显示为表格，您将得到一个宽度，该宽度随着标题文本的内容（您有“1st”，“2nd”等）而变形。

ul {display: table;}

使用jQuery缺乏li元素的平滑展开崩溃

2 个答案: