Question

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

中创建了一个演示

在垂直滑动菜单中悬停在'manage'上有查找管理菜单，其中有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并从头开始，因为它将越来越难以从这个混乱中挖掘出来。

jquery悬停滑动垂直和水平菜单

1 个答案: