javascript - 悬停滑动垂直和水平菜单上的jquery

Question

我已经创建了一个 jquery onhover 垂直滑动菜单栏，现在我需要实现水平滑动，我也面临着一些样式问题，它不是水平滑动的

我已经在 jsfiddle 中创建了一个演示 link to demo

将鼠标悬停在垂直滑动菜单中的“管理”上时，会出现查找管理菜单，在该菜单下有 2 个子菜单(hi 和 hello)，我想水平滑动但无法这样做，似乎有一些问题javascript 谁能帮帮我

JavaScript 在这里

    var menuShowDelay = 500;
var menuHoverTimer = null;
$(function () {
    bindMenuSliding();
});

function bindMenuSliding() {
    // Expand menu on mouse over.
    $('.ulMiddleMenu li').hover(function () {
        // Clear previous mouse hover timer.
        if (menuHoverTimer) {
            clearTimeout(menuHoverTimer);
            menuHoverTimer = null;
        }



        var targetElement = $(this); // Get the target element.

        // Display the menu after a certain time interval.
        menuHoverTimer = setTimeout(function () {
            targetElement.parent('ul').find('ul').stop(true, true).css('display', 'none');
            targetElement.find('ul').slideDown('medium');
        }, menuShowDelay);
    },
    function () {
        // Clear previous mouse hover timer.
        if (menuHoverTimer) {
            clearTimeout(menuHoverTimer);
            menuHoverTimer = null;
        }

        // Hide the menu.
        $(this).find('ul').slideUp('fast');
    });
}

你可以复制粘贴到jsfiddle的javascript面板

Answer 1

两个主要问题。第一，您在悬停时显示所有子菜单，而不仅仅是子菜单。第二，您没有区分导航级别的逻辑，因此根本无法期望较低级别的行为有所不同。

// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
    var $parent = targetElement.parent('ul');
    $parent.find('ul').stop(true, true).hide();
    //test for first level nav 
    if( $parent.hasClass("ulMiddleMenu") ){
        targetElement.children('ul').slideDown('medium');
    }else{
        targetElement.find('ul').width(0).show().animate({width:'100%'},1000);
    }

}, menuShowDelay);

jsFiddle .这仍然有一些问题需要您在显示方面解决。您应该考虑放弃您的 CSS 并从头开始，因为要摆脱这种困惑局面会越来越难。