Question

我刚刚开始使用jQuery。我想制作一个简单的'ul'下拉菜单来提高我的理解力。基本流程如下：

'ul.menu li ul'有显示：无＆gt;＆gt;在李的徘徊，得到＆amp;商店高度'this'ul＆gt;＆gt;将'this'ul的高度设置为0＆gt;＆gt;将显示设置为块＆gt;＆gt;动画高度到原始存储高度

我知道已经有一些很棒的下拉菜单，但我真的想自己动手来更好地理解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％。

其次，我确信这一切都可以简化为几行，但实际上并不知道如何做到这一点。

非常感谢任何帮助！

更新：好的，所以我几乎就在那里。我使用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＆gt; li'）代替$（'ul.menu li'）

这将使悬停仅定位到您悬停在列表项目下的菜单。

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上的文档。

需要帮助构建一个jQuery下拉菜单

2 个答案: