菜單和子菜單懸停兩個與單獨的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甚至不會讓你進入你的下拉列表。