缺乏使用 jQuery 的 li 元素的平滑展开折叠

Question

我正在尝试在鼠标输入ul时向下滑动li元素，并且在mouseLeave上它将向上滑动其li元素。当我有不同数量的 li 元素时，当一个向上滑动时，它会自动导致鼠标输入另一个 ul

如何防止这种情况以确保平滑的扩展/折叠体验？

这是我到目前为止尝试过的，我正在使用悬停变量来有一个标志，以便在接下来的 2 秒内鼠标输入不会导致折叠/展开

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());
};

这是小提琴

Answer 1

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

ul {width: 50px;}

Answer 2

如果将

ul 显示为表格，您将获得一个随标题文本内容弯曲的宽度（其中有"1st"、"2nd"等）

ul {display: table;}