Question

我试图让我的子菜单向下滑动并让它保持打开状态。我知道我可以设置悬停在<li>标签上，但是当我将鼠标悬停在我的:: after元素上时，它也会打开，我不想要。

任何人都知道如何让子菜单（和子子，......）保持不变。

Answer 1

它与您的嵌套有关 - 您的悬停事件在锚元素上，当鼠标离开锚元素边界时，onmouseout事件被触发并且您的子菜单关闭。

您需要将您的悬停应用于子菜单li - 然后当子菜单向下滑动并将鼠标移到子菜单上时，您仍然会将鼠标悬停在父元素上。

希望有道理吗？

编辑：我把JS改为：

$(document).ready(function () {
    $(".level2, .level3, .level4").css('display', 'none');
    $(".media, .groepen").hover(

    function () {
        $('.back2').stop(true, false).slideDown('medium');
        $(this).closest('li').find('ul.level2').stop(true, false).slideDown('medium');
    },

    function () {
        $('.back2').stop(true, false).slideUp('medium');
        $(this).closest('li').find('ul.level2').stop(true, false).slideUp('medium');
    });
    $(".mediaSub").hover(

    function () {
        $(this).closest('li').find('ul.level3').stop(true, false).slideDown('medium');
    },

    function () {
        $(this).closest('li').find('ul.level3').stop(true, false).slideUp('medium');
    });
    $(".2014, .2015").hover(

    function () {
        $(this).closest('li').find('ul.level4').stop(true, false).slideDown('medium');
    },

    function () {
        $(this).closest('li').find('ul.level4').stop(true, false).slideUp('medium');
    });
});

这似乎适用于Chrome - 您看到哪个浏览器分隔符会触发菜单？

在<a> tag</a>上悬停时子菜单不停留

1 个答案: