1

我正在尝试为他们以前的 Web 开发人员创建的客户端编辑 javascript 菜单。我不擅长 Javascript。客户要求我在 ROLLOVER 上展开菜单可扩展项，而不是在单击时展开。所以，我将 .click 更改为 .hover ，效果很好。问题是，当您将鼠标从主标题移到菜单的实际可扩展区域时，菜单会逐渐消失/消失。我感觉这与 .mouseneter 部分有关，但我不确定如何继续。想法？

function fadeMenu(el) {
    var delayMenu = setTimeout(function () {
        $(el).fadeOut(300);
        $(el).prev('.dropdown-toggle').removeClass('dropdown-enabled').animate({
            backgroundColor: 'transparent',
            color: '#000000'
        }, 300, function () {
            $(this).css({
                color: '',
                backgroundColor: ''
            });
        });
    }, 500);

    el.data('delayMenu', delayMenu);
}

$(document).ready(function () {
    $('a.dropdown-toggle').click(function () {
        var menu = $(this).next('.dropdown-menu');
        var link = $(this).parent('li');
        var otherMenus = $('.dropdown-menu').not(menu);
        var otherToggles = $('.dropdown-toggle').not($(this));
        var toggle = $(this);
        var toColor = '';

        if ($(menu).is(":visible")) {
            if ($(link).is(":hover")) {
                toColor = '#ff7e00';
            } else {
                toColor = '#000000';
            }

            $(menu).fadeOut(300);
            $(toggle).removeClass('dropdown-    enabled').stop().animate({
                backgroundColor: 'transparent',
                color: toColor
            }, 300, function () {
                $(this).css({
                    color: '',
                    backgroundColor: ''
                });
            });
        } else {
            if ($(otherMenus).is(':visible')) {
                $(otherMenus).fadeOut(300);
            }

            $(toggle).stop().animate({
                backgroundColor: '#1f1f1f',
                color: '#ffffff'
            }, 300).addClass('dropdown-enabled');
            $(menu).fadeIn(300);

            $(otherToggles).stop().animate({
                backgroundColor: 'transparent',
                color: '#000000'
            }, 300, function () {
                $(otherToggles).css({
                    color: '',
                    backgroundColor: ''
                });
            });

        }

        return false;
    });

    $('.dropdown-menu').mouseenter(function () {
        clearTimeout($(this).data('delayMenu'));
    }).mouseleave(function () {
        fadeMenu($(this));
    });

    $('.dropdown-toggle').mouseenter(function () {
        clearTimeout($(this).next('.dropdown-menu').data('delayMenu'));
    }).mouseleave(function () {
        fadeMenu($(this).next('.dropdown-menu'));
    });
});
4

0 回答 0