指導完成jQuery下拉菜單

Question

我想創建一個下拉菜單，但我堅持在第一步（我正在學習jquery）。現在我想要的是每當我將鼠標懸停在「支持」菜單項上時，「下拉菜單項目1」應該出現，並且當我將其懸停時（下拉菜單項目1），「下拉菜單項目2」應該出現在水平放置在「下拉菜單項1」旁邊的盒子。

我已經提供了這個小提琴：http://jsfiddle.net/pyrot/84eWr/

可有人請幫我這。我真的很感激任何幫助。

下面是HTML：

<ul> 
<li class="support">support</li> 
<li class="support-drop hide">drop menu item 1</li> 
<li class="support-drop two hide">drop menu item 2</li> 
</ul> 

這裏是我掙扎代碼：

$(document).ready(function() { 

     $(".support").hover(function() { 
      $(".support-drop").addClass("support-drop.hide"); 
     }, function() { 
      $(".support-drop").removeClass("support-drop.hide"); 

     }); 

)} 

這裏是CSS：

ul {color: #000000;} 

.support-drop.hide { display: none ;} 

.support-drop { 
    background-color: #000000; 
    color:#ffffff; 
    width: 200px; 
    height: 100px; 
} 

.support-drop.two { 
    background-color: #5C5C5C; 
    color:#ffffff; 
    width: 200px; 
    height: 100px; 
} 

Answer 1

首先，在所有你需要知道如何結構下拉的作品。是與ul和li標籤的方式。你在哪裏得到的信息每個級別的ul，並保持它的li裏面的物品，如：

<ul> 
    <li class="support">support 
    <ul> 
     <li class="support-drop hide">drop menu item 1 
     <ul> 
      <li class="support-drop two hide">drop menu item 2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

採用該結構現在你可以以正確的方式工作。首先需要像display:none這樣正確的CSS屬性來隱藏子菜單和position:absolute以獲得期望的視覺效果。

你可以使用CSS創建下拉菜單，但是如果你想用JQuery來做到這一點，你需要hover()處理程序來執行顯示和隱藏操作。就像這樣：

$('li').hover(function(){ 
    $(this).children('ul').slideToggle(); 
}) 

入住這Fiddle Demo

Answer 2

它應該是像這樣：

您需要添加類說「一」到第二元件

<li class="support-drop hide *one*">drop menu item 1</li> //html add class say "one" 

    $(".support").hover(function() { 
     $(".one").show(); // it already has the class, so no addClass is needed. 
    }, function() { 
     $(".one").hide(); // removing class will get you not working next time. 

    }); 

///再次爲第二個下拉到顯示：

$(".one").hover(function(){ 
     $('.two').show(); 
    }, function(){ 
      $('.two').hide(); 
    }) ;