创建一个简单的子菜单下拉使用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'); 
    }); 
});