jquery - 需要帮助构建 jQuery 下拉菜单

Question

我刚刚开始使用 jQuery。我想制作一个简单的“ul”下拉菜单来提高我的理解。基本流程是这样的:

'ul.menu li ul'具有显示:无>>悬停在li上，获取并存储'this'ul的高度>>将'this'ul的高度设置为0>>将显示设置为 block >>动画高度到原始存储高度

我知道已经有一些很棒的下拉菜单插件，但我真的想推出自己的插件以更好地理解 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 > li') 而不是 $('ul.menu li')

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