垂直下拉菜单悬停效果以在悬停时关闭子菜单答案

【问题标题】：Vertical drop down menu hover effect to close sub menu when hover out垂直下拉菜单悬停效果以在悬停时关闭子菜单
【发布时间】：2014-08-23 01:49:59
【问题描述】：

我有这个菜单，我需要稍微调整一下，因为它对用户不太友好。当您看到演示时，您会注意到悬停效果在第一次悬停时触发并保持打开状态，直到再次悬停在 (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 );

【问题讨论】：

下次最好加个jsfiddle...
jsfiddle.net/e5n80zxv

标签： javascript html css drop-down-menu responsive-design

【解决方案1】：

这是因为如果您使用“悬停”，该函数仅在“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/

【讨论】：

您好，我按照您的建议做了，但现在我无法使用子菜单，您可以再次查看网址
纯css解决方案怎么样？
好的，我修复了 js...我将发布这 2 个解决方案：D
非常感谢你，现在我将阅读并找到更改，看看我错过了什么:)
我可以稍后解释 :D 如果你愿意...如果你需要在 cmets 中进行更多解释，请告诉我

【解决方案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/ 了解更多信息。

希望这会有所帮助。

【讨论】：