菜单和子菜单悬停都带有单独的 div

Question

我想我一整天都在想这件事。应该没那么难……

我有一个带有主菜单的 div，它是带有子菜单的子菜单。我最初的问题是想在屏幕上以绝对定位显示子菜单水平而不是垂直，这样我就可以把它放在我想要的地方。现在我遇到了这个烂摊子，我认为过度考虑情况已经让我迷失了。

我只想在将鼠标悬停在父级上后将子菜单与父级分开，然后只要您在父级或子菜单上就保持它，并在您离开时将其淡出，将附加的子菜单放回父母。将鼠标悬停在具有子菜单的父级上时徽标会淡出，并在子菜单淡出时淡入。无论如何，它现在所做的就是在徽标中逐渐消失，并且在将鼠标悬停在子菜单上时确实有问题，而且有时悬停在它上面时根本不会停留。

如果有更好的方法来定位它，这样我就不必经历这个混乱，或者只是整体上更好的方法，请指出。

    <script type="text/javascript">
    jQuery(document).ready(function($){
        var inEle = false;
        var hideTimer;

        $('.sub-menu li a').css('display', 'inline-block');

        // do hover on main menu
        $('.uk-navbar-nav li a').hover(
            function() {
                // reset everything on new hover
                clearTimeout(hideTimer);

                // fade in the spire logo
                $('.logoimgcontainer img').stop(true, true).fadeIn(2000);

                inEle = true;

                // save the id if there is one to hide
                var subID = $('body').children('ul[class*="sub-menu"]').attr('id');
                // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                $('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id');
                // fade out the ul submenu
                $(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100);
                // find the div holding the ul submenu and take out its placeholder id
                $(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id');

                //show submenu
                if ($(this).parent().find('div').hasClass('uk-dropdown')) {             
                    $('.logoimgcontainer img').stop(true, true).fadeOut(150);
                    $(this).parent().find('div').find('ul').appendTo('body').css({
                        'display' : 'inline-block',
                        'position' : 'absolute',
                            'left' : '0',
                            'right' : '0',
                            'top' : '90px',
                        'margin' : 'auto',
                        'width' : '300px',
                        'text-align' : 'center',
                        'z-index' : '150'
                    }).attr('id', $(this).text());
                    $(this).parent().find('div').attr('id', $(this).text());
                    $(this).parent().find('div').find('ul').fadeIn(1000);
                }
            }, function() {
                // do nothing here mkay
            }
        );

        // do hover out on main menu
        $('.uk-navbar-nav li').hover(
            function() {
                // do nothing here k
            },function() {
                // check if this item has a submenu
                if ($(this).find('div').hasClass('uk-dropdown')) {
                    // clear out the timer
                    clearTimeout(hideTimer);

                    var aID = $(this).find('a').text();

                    // go ahead and set it not in sub since it hovered out here
                    inEle = false;

                    // reset the timer
                    hideTimer = setTimeout(function() {
                        // make sure its not in the submenu
                        if (!inEle) {
                        //var checkUL = $('ul[id*="'+aID+'"]');
                        //if (!checkUL.is(":hover")) {
                           // hideTimer = setTimeout(function() {
                                // fade in the spire logo
                                $('.logoimgcontainer img').stop(true, true).fadeIn(2000);

                                // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                                $('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id');
                                // fade out the ul submenu
                                $(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500);
                                // find the div holding the ul submenu and take out its placeholder id
                                $(this).find('div[id*="'+aID+'"]').removeAttr('id');

                            //}, 1000);
                        }else clearTimeout(hideTimer);  // still in the sub menu, clear the timer, handle in submenu
                    }, 1000);
                }
            }
        );

        // do hover in the submenu
        $('.sub-menu').hover(
            function() {
                // set were in the submenu now
                inEle = true;

                // take out the timer for the main menu
                clearTimeout(hideTimer);
            }, function() {
                // dont need the timeout anymore, not in submenu or main menu item
                clearTimeout(hideTimer);

                var ulID = $(this).attr('id');

                // set were out of the submenu
                inEle = false;
                hideTimer = setTimeout(function() {
                    //var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")');
                    //if (!checkUL.is(":hover")) {
                    if (!inEle) {
                        // fade in the spire logo
                        $('.logoimgcontainer img').stop(true, true).fadeIn(3000);

                        // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                        $('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id');
                        // fade out the ul submenu
                        $('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500);
                        // find the div holding the ul submenu and take out its placeholder id
                        $('body').find('div[id*="'+ulID+'"]').removeAttr('id');
                    }else clearTimeout(hideTimer);  // still in the sub menu, clear the timer, handle in submenu
                }, 1000);
            }
        );
    });
    </script>

Answer 1

我建议使用点击而不是悬停，因为悬停在移动设备（也称为触摸屏）上不起作用。如今，滚动自己的菜单有点像重新发明轮子。我可以推荐一些很好的基于引导程序的模板，这些模板已经内置了菜单，它们甚至“神奇地”变成了移动设备上的汉堡包。但是，也许您正在尝试学习并且我自己编写了一些菜单，并且可以给您的一条建议是您应该使用 jquery 并使用 mouseLeave 而不是 mouseOut。 mouseOut 甚至不会让您进入下拉列表。