Question

我有这个菜单，我需要调整一下，因为它不是非常用户友好。当您看到演示时，您可以注意到悬停效果在第1个悬停时触发并保持打开状态，直到再次悬停（Resturant）。我想在指针离开链接框时自动关闭。此外，当我一次又一次地进出快速移动时，就有15秒的动画。我可以调整一下吗？

这是一个演示，请注意它仍在进行中。

LINK

这是我对此菜单的javascript。

        ( function( $ ) {
    $( document ).ready(function() {
    $('#cssmenu li.has-sub>a').mouseenter(function( event ){
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp();
            }
            else {
                element.addClass('open');
                element.children('ul').slideDown();
                element.siblings('li').children('ul').slideUp();
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp();
            }
        });

        $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

        (function getColor() {
            var r, g, b;
            var textColor = $('#cssmenu').css('color');
            textColor = textColor.slice(4);
            r = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            g = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            b = textColor.slice(0, textColor.indexOf(')'));
            var l = rgbToHsl(r, g, b);
            if (l > 0.7) {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0px rgba(0, 0, 0, .35)');
                $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
            }
            else
            {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0 rgba(255, 255, 255, .35)');
                $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
            }
        })();

        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;

            if(max == min){
                h = s = 0;
            }
            else {
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max){
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return l;
        }
        event.preventDefault();
    });
    } )( jQuery );

Answer 1

因为该功能仅在＆＃39; mouseenter＆＃39;如果您使用＆＃39; hover＆＃39;相反，该功能将触发＆＃39; mouseenter＆＃39;和＆＃39; mouseleave＆＃39; ：d

替换

    $('#cssmenu li.has-sub>a').mouseenter(function( event ){

与

    $('#cssmenu li.has-sub>a').hover(function( event ){

关于延迟：jquery将为每个触发的事件保存动画，以立即停止必须添加的元素上的所有其他动画：

.stop( true, true )

JSFIDDLE ：http://jsfiddle.net/StartStep/m90s2dq5/2/

JSFIDDLE （CSS解决方案）：http://jsfiddle.net/StartStep/m90s2dq5/3/

Answer 2

使用jQuery .mouseleave()或.hover()函数。例如：

$('#cssmenu .has-subs').hover(function() {
   //do something when mouse enters
}, function() {
   //do something when mouse leaves
});

查看http://api.jquery.com/hover/了解详情。

希望这有帮助。

垂直下拉菜单悬停效果在鼠标悬停时关闭子菜单

2 个答案: