javascript - 菜单和子菜单都悬停在单独的 Div 上

Question

我想我一整天都在想这个问题。它不应该这么难...

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

我只是想在将鼠标悬停在父菜单上后将子菜单与父菜单分开，然后只要您在父菜单或子菜单上就保持它，并在您离开时淡出，将子菜单附加回 parent 。将鼠标悬停在具有子菜单的父菜单上时， Logo 会淡出，并在子菜单淡出时淡入。它现在所做的是无论如何都会在 Logo 中逐渐淡出，并且在将鼠标悬停在子菜单上时确实存在错误，并且有时将鼠标悬停在其上时它根本不会停留。

如果有更好的定位方法，这样我就不必经历这个烂摊子，或者总体上有更好的方法，请指出。

    <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

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