垂直下拉菜單懸停效果，懸停時可關閉子菜單

Question

我需要對該菜單進行一些調整，因為它不是非常用戶友好。 觀看演示時，您會注意到，懸停效果會在第一個懸停時觸發，並保持打開狀態，直到（Resturant）再次懸停。 當指針移出鏈接框以自動關閉時，我要創建它。 同樣，當我一次又一次地快速進出時，會有大約15秒的動畫。 我可以調整一下嗎？

這是一個演示，請注意，它仍在進行中。

鏈接

這是我在此菜單中使用的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

那是因為如果您使用“ hover”，則該函數僅在“ mouseenter”事件上運行，而該函數將在“ mouseenter”和“ mouseleave”上觸發：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/了解更多信息。

希望這可以幫助。