我有一个多级下拉菜单,我想在菜单中鼠标输出时给你一些时间

时间:2016-04-16 09:32:09

标签: jquery html5 css3

以下是链接http://www.software.slb.com/,我有一个多级下拉菜单,当我移动菜单的鼠标输出时,菜单应保持至少3秒,目前它的移动速度非常快。请帮忙。

//这是js代码//

 $(".flyout-menu").children('.navbar-nav').children('li').find("a").each(function (index, value) {
        $(value).mouseover(function () {
            $(".sub-level1 .list-inline").show();
            var parentID = $(this).text().replace(' ', '_');
            $(".sub-level1").show();
            $(".sub-level1 .list-inline").not("ul#" + parentID + ".list-inline").hide();
        });
    });
    $(".sub-level1").mouseover(function () {
        $(".sub-level1").css({ display: 'block' });
    });

    $(".sub-level1 .level1li").mouseover(function () {
        SetCommonHeight();
    });

    $(".sub-level2").mouseover(function () {
        $(".sub-level2").css({ display: 'block' });
        $(this).css('height', 'auto');
        SetCommonHeight();
    });


        $(".sub-level3").mouseover(function () {
        $(".sub-level2").css('height', 'auto');
        $(this).css('height', 'auto');
        SetCommonHeight();
    });
    $(".section, .main-header").mouseover(function () {
        $(".sub-level1").css({ display: 'none' });
    });
    if ($("ul#Communities li.level1li a").length == 0) {

        $("ul#Communities li.level1li").hide();
    }


    function SetCommonHeight() {
        var max = 1;
        $('div[class^="sub-level"]:visible').each(function () {
            var h = $(this).height();
            max = h > max ? h : max;
        });
        if ($('div[class^="sub-level"]:visible').length < 3) {
            $(".sub-level2:visible").css('height', 'auto');
        }
        else {
            $(".sub-level2:visible").height(max);
        }
        if ($('div[class^="sub-level"]:visible').length < 3) {
            $(".sub-level3:visible").css('height', 'auto');
        }
        else {
            $(".sub-level3:visible").height(max);
        }
        $(".sub-level4:visible").height(max);
    }

提前致谢

1 个答案:

答案 0 :(得分:0)

为该菜单创建一个onmouseout函数,就像onmouseover函数一样,但是持续3秒。您可以使用settimeout函数进行延迟。 这样,当鼠标离开菜单时,执行上述功能。 3秒后它会像现在在ounmouseover上发生的那样消失。

祝你好运。