菜单和子菜单悬停两个与单独的Divs

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

我建议使用点击而不是悬停，因为悬停在移动设备（又名触摸屏）上不起作用。滚动你自己的菜单有点像重新发明轮子。我可以推荐一些基于Bootstrap的模板，这些模板已经内置了菜单，甚至可以在移动设备上“神奇地”变成汉堡包。然而，也许你正在努力学习，我自己写了一些菜单，并且可以给你的一条建议是，你应该使用jQuery并使用mouseLeave而不是mouseOut。 mouseOut甚至不会让你进入你的下拉列表。