創建一個簡單的子菜單下拉使用jQuery

Question

這裏的是我的目標爲example：

---

我不喜歡我有裝飾用類li元素，以便正確地火事件。如果我有多個嵌套類別下拉菜單會發生什麼？事情變得凌亂快！

我也似乎無法選擇一個選項，只要我離開事件捕獲區域就關閉它。

關於如何構建精心製作的下拉導航菜單的任何建議？

Answer 1

你並不真的需要與選擇的一些巧妙的用法任何類： P

我設置了一個例子的fiddle，下面的代碼：

HTML：

<nav> 
    <ul> 
     <li><a href="#">HOME</a></li> 
     <li> 
      <a href="#">OFFERS</a> 
      <ul> 
       <li> 
        <a href="#">NEW</a> 
        <ul> 
         <li>YAY!</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">SETTINGS</a></li> 
     <li><a href="#">TV's</a></li> 
     <li><a href="#">COMPUTERS</a></li> 
     <li><a href="#">RICE</a></li> 
    </ul> 
</nav>​ 

如您所見，不需要單個class/id：P元素「OFFERS」是唯一具有下拉菜單的元素，並且在該菜單中，元素「NEW」具有另一個元素。

CSS：

li > ul { display: none; } 
li li { margin-left: 10px; } 

第一個樣式是最重要的一個。起初，我們希望我們的子菜單被隱藏。其他風格只是爲了清晰起見。

的jQuery：

$("nav ul li").hover(function(){ 
    if ($("> ul", this).length > 0) { 
     $("> ul", this).show(); 
    } 
}, function(){ 
    if ($("> ul", this).length > 0) { 
     $("> ul", this).hide(); 
    } 
});​ 

是啊，作爲:)當我們hover菜單元素，我們檢查，如果有任何ul直接孩子一樣簡單，如果這樣做，我們告訴他們。當我們離開菜單元素時，我們會再次檢查它是否有任何直接子女，如果有，我們將它們隱藏起來。

當然，您需要設置它的樣式，並確保您清除任何li內的任何浮點。

Answer 2

您需要使用類來正確控制流。特別是在你的外部容器上。

例如在我的菜單中，我有一個ul包含所有菜單，每個菜單項是li。 li是第一級標題，另外還有一個ul包含子菜單。

<ul class="menu"> 
    <li> 
     Item 1 
     <ul><!--Further items--></ul> 
    </li> 
    <li> 
     Item 2 
     <ul><!--Further items--></ul> 
    </li> 
</ul> 

然後，您可以使用子選擇器來控制此選項。儘管簡單地使用一個類有時更容易。

$(".menu > li") //First level items 
$(".menu > li > ul") //Submenus 

說你想使菜單向下滑動，當你點擊的第一級項目之一：

$(".menu > li").click(function() { 
    $this = $(this); //Caching. Not really needed for this example. But anyway :) 
    $this.children("ul").slideToggle("fast"); 
}); 

Answer 3

$(document).ready(function(){ 
    $("ul.MenuNavi li").mouseover(function(){ 
    $(this).children('ul').slideDown('3000'); 
    }); 
    $("ul.MenuNavi li").mouseleave(function(){      
    $(this).children('ul').stop(true).slideUp('3000'); 
    }); 
});