构建jQuery下拉菜单需要帮助

Question

我刚刚开始使用jQuery。我想做一个简单的'ul'下拉菜单来提高我的理解。基本流程是这样的：

'ul.menu li ul'显示：none >>关于li悬停，获得&存储高度'this'ul >>设置'this'ul的高度为0 >>集显来阻止>>动画高度原始存储的高度

我知道已经有用于下拉列表一些伟大的插件，但我真的想推出自己得到更好的理解的jQuery。

到目前为止，我已成功以下，非常做得不好（在这里看到现场版 - http://jsbin.com/eduvi）：

---

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

// Get height of current hidden ul 

     $j("ul.menu li").hover(function() { 
      getHeight($j("ul", this).height()); 
     }); 
// Set height to 0px  

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"height":"0px"}); 
}); 

// Set display to block 

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"display":"block"}); 
}); 

// Animate height to stored height 

    $j('ul.menu li').hover(function getHeight(h) { 
    $j('ul:first', this).stop().animate({ "height" : "100%" } , 400); 
}); 

// Display height of current hidden ul 

    function getHeight(h) { 
     $j("div.test").text("The height for the hidden ul is " + h + "px."); } 
    }); 

---

我想知道我怎么得到它使用存储的原始高度，而不是100％。

其次，我敢肯定，这都可以降低冷凝成短短的几行，但真的没有线索如何做到这一点呢。

非常感谢任何帮助！

UPDATE： OK，所以我几乎没有。我使用Marve发布的代码作为基础，并在其他位中工作。唯一不起作用的是我需要将隐藏的UL的高度重新设置为最初的高度，并将它的显示设置为无，因此它已准备好再次悬停。任何想法，为什么它不会工作？

---

$j('ul.menu > li').hover(
    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); }, 
    function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight, display:none}); } 
); 

---

Answer 1

这里有一个简单的CSS提示，以帮助您：

使用$（ 'ul.menu>礼'），而不是仅仅$（ 'ul.menu礼'）

这将使悬停只针对您悬停在列表项下的菜单。

Answer 2

这是伟大的，你正在学习jQuery和利用这个问题来做到这一点。荣誉！

我认为你是过度工程解决问题的解决方案。看看两个内置的jQuery函数，这些函数有助于从解决方案中删除一些工作：slideDown和slideUp。您无疑会在jQuery documentation中找到更多有用的功能。下面这段代码做许多事，你贴什么不已：

$j(document).ready(function() { 
    $j('ul.menu > li').hover(
     function() { $j(this).children('ul').stop(true, true).slideDown(); }, 
     function() { $j(this).children('ul').stop(true, true).slideUp(); } 
    ); 
}); 

的片段不处理你的HTML样本中有子菜单，但由于你的学习欲望，它不应该是一个延伸到执行它。

也可参阅stop的文档。