jQuery懸停菜單不會消失

Question

編輯：請參閱此處的操作：http://jsbin.com/emobi/5 - 這是使用mouseenter/mouseleave。

我有一個基本菜單，使用一些嵌套的UL，這是我認爲很標準的。當從「根」菜單懸停在LI上時，我想要顯示該LI內的UL。移動鼠標或關閉另一個LI，它會顯示該子菜單。向下移動到子菜單，並將其懸停在每個元素上方。我有一個簡單的jQuery.hover（）集，但後來遇到了問題。當在一個頁面上，「根」菜單項被賦予一類'當前頁'，如果該類存在，我希望它在鼠標移出後靜態顯示該子菜單。

希望我解釋得不錯。我只是拋出一個變量進入懸停函數，所以在mouseout上它在當前頁面的子菜單上運行.show（）。簡單。除了當我在子菜單的各個LI之間移動鼠標時，它將切換回當前頁子菜單。所以我試圖在這裏添加一個基於another question的計時器元素。這使事情變得更糟 - 現在子菜單不會消失。

這是我的CSS，標記和JS ......我該如何正確地工作？

標記：

<div id="menu"> 
<div id="navbar"> 
    <ul id="firstmenu"> 
     <li> 
      <a href="http://localhost/site/pageone">page one</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href="http://localhost/site/pagetwo">barely there</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li class="current-page"> 
      <a href="http://localhost/site/pagetwo">kith & kin</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 

     </li> 
     <li> 
      <a href="http://localhost/site/pagethree">focal point</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="http://localhost/site/pagefour">products</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="http://localhost/site/pagefive">clients</a> 
     </li> 

    </ul> 
</div></div> 

而這裏的CSS：

#navbar { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    text-align: center; 
} 

#firstmenu { 
    margin: 6px auto 0 auto; 
    font-size: 16px; 
    list-style-type: none; 
    letter-spacing: -1px; 
} 

#firstmenu li { 
    display: inline; 
    position:relative; 
    overflow: hidden; 
    text-align: center; 
    margin-right: 10px; 
    padding: 5px 15px; 
} 

#firstmenu a { 
    text-decoration: none; 
    outline: none; 
    color: black; 
    font-weight: 700; 
    width: 75px; 
    cursor: pointer; 
} 

.current-page { 
    color: white; 
    background: url(../images/down_arrow.png) bottom center no-repeat; 

} 
.current-page a { 
    color: white; 
    border-bottom: 1px solid black; 
} 

#firstmenu .current-page a { 
    color: white; 
} 

#firstmenu li.hover { 
    color: white; 
    background: url(../images/down_arrow.png) bottom center no-repeat; 
} 
#firstmenu li.hover a { 
    color: white; 
    border-bottom: 1px solid black; 
} 

#firstmenu li ul li.hover { 
    color: white; 
    background: none; 
} 
#firstmenu li ul li.hover a { 
    color: white; 
    border-bottom: none; 
    text-decoration: underline; 
} 

#firstmenu li ul { 
    width: 900px; 
    color: white; 
    font-size: .8em; 
    margin-top: 3px; 
    padding: 5px; 
    position: absolute; 
    display: none; 
} 

#firstmenu li ul li { 
    list-style: none; 
    display: inline; 
    width: auto; 
} 

#firstmenu li ul li a { 
    color: white; 
    font-weight: normal; 
    border: none; 
} 

.sub-current-page { 
    font-weight: bold; 
    text-decoration: underline; 
} 

#firstmenu li ul li.sub-current-page a { 
    font-weight: bold; 
} 

最後，我不是不惜一切工作的JS（這是一個$（文件）。就緒（） ，當然）：

// Initialize some variables 
    var hideSubmenuTimer = null; 
    var current_page; 
$('.current-page ul:first').show(); 

    // Prep the menu 
    $('#firstmenu li').hover(function() { 
     // Clear the timeout if it exists 
     if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } 

     // Check if there's a current-page class set 
     if($('li.current-page').length > 0) { 
      current_page = $('li.current-page'); 
     } else { 
      current_page = false; 
     } 

     // If there's a current-page class, hide it 
     if(current_page) { current_page.children('ul:first').hide(); } 

     // Show the new submenu 
     $(this).addClass('hover').children('ul:first').show(); 

    }, function(){ 
     // Just in case 
     var self = this; 
     // Clear the timeout if it exists 
     if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } 

     // Check if there's a current-page class set 
     if($('li.current-page').length > 0) { 
      current_page = $('li.current-page'); 
     } else { 
      current_page = false; 
     } 

     // Set a timeout on hiding the submenu 
     hideSubmenuTimer = setTimeout(function() { 
      // Hide the old submenu 
      $(self).removeClass('hover').children('ul').hide(); 

      // If there's a current-page class, show it 
      if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); } 
     }, 500); 
    }); 

那麼我在做什麼這樣錯了？作爲一個便箋，我使用$（'。current-page ul：first'）。show（），因爲如果我在.current-page中給CSS中的任何「顯示」設置，它會定位它真的很奇怪在頁面上。

Answer 1

答案是腳本試圖運行懸停/的mouseenter /無論對李的子菜單的功能。通過給每個根菜單LI的他們自己的類，它現在起作用。這樣就不會調用子菜單LI的功能。這是完成的功能：

$('#firstmenu .root-item').mouseenter(function() { 
    $(this).addClass('hover').children('ul:first').show(); 
    if($('.current-page').length > 0) { 
     $('.current-page').children('ul:first').hide(); 
    } 
}).mouseleave(function() { 
    $(this).removeClass('hover').children('ul').hide(); 
    if($('.current-page').length > 0) { 
     $('.current-page').children('ul:first').show(); 
    } 
}); 

Answer 2

你爲什麼搞砸超時？你應該只是.toggle()？

Answer 3

我重寫它不使用懸停，但mouseover和mouseout。 不知道，如果你喜歡它，但這裏是代碼：

$(document).ready(function(){ 
      $(".submenu").hide(); 
      $("li").mouseover(function(){ 
      $(this).find('.submenu').show(); 
      }); 
      $("li").mouseout(function(){ 
      $(this).find('.submenu').hide(); 
      }) 
}); 

編輯：我花了時間來檢查你的代碼，發現有問題的行：

#firstmenu li { 
    display: inline; 

由於嵌套名單內第一個菜單div也適用於他們。內嵌的嵌套列表無法放置，因此不再放置在佈局引擎中作爲其dom父項的子項。結果是鼠標懸停在子菜單上仍然被認爲是鼠標懸停在它的dom父項上（由於冒泡），但是在列表項之間，你將不再在dom父項上進行鼠標移動（因爲它在原始設計中）。你需要重新考慮你的佈局設計，因爲現在它打破了佈局引擎。

你或許應該重新考慮也利用列爲表...