Question

我正在使用侧边栏，我想要它，所以当我将鼠标悬停在侧边栏上时，会弹出两个选项（使用.slide）。这就是我到目前为止所做的：

       $("#userFActivator").hover(
            function () {
                $("#userF").show("slide", { direction: "left" }, 400);
            },
            function () {
                setTimeout(next(), 400);
                function next() {
                    if ($("#userF").is(":hover") === true) {
                        $("#userF").show();
                    } else {
                        $('#userF').hide('slide', { direction: 'left' }, 400);
                    }
                }
            }
        );

当我将鼠标悬停在他们离开的选项上时，它给我的一切都是一个非常小问题的侧边栏。是否有一种解决方案可以让我在将鼠标悬停在选项上时让它们停留在一起，以便用户可以在它们消失之前点击它们？谢谢！

Answer 1

解决方案是将菜单父元素放在容器中，并对菜单子项执行相同的操作：

<ul>
    <li>
        <span class='label'>Menu item 1</span>
        <ul class='submenu'>
            <!-- etc. -->
        </ul>
    </li>
    <li>
        <span class='label'>Menu item 2</span>
        <ul class='submenu'>
            <!-- etc. -->
        </ul>
    </li>
</ul>

然后在您的javascript中，将'：hover'选择器放在<li/>上，而slide - 将孩子<ul class='submenu'/> - s。

Answer 2

您的代码中存在几个问题。

setTimeout(next(), 400); - 在此代码中，next()将立即执行，而不会在400 ms后执行，因为您正在调用函数而不是传递其引用。

接下来，您可以使用匿名函数，而不是每次都定义它。

试试这个。

   $("#userFActivator").hover(
        function () {
            $("#userF").show("slide", { direction: "left" }, 400);
        },
        function () {
            setTimeout(function() {
                if ($("#userF").is(":hover") === true) {
                    $("#userF").show();
                } else {
                    $('#userF').hide('slide', { direction: 'left' }, 400);
                }
            }, 400);
        }
    );

jQuery：侧面下拉菜单？

2 个答案: