所以我想创建一个类似于星巴克的下拉菜单。我的初始菜单是带链接的简单UL，但没有像正常下拉列表那样的第二个撕裂列表。我有Jquery处理链接上的悬停并显示与相应类的div。即将鼠标悬停在ID为'blog'的链接上..显示div与类博客。这很好用，问题在于slideUp slideDown过渡。而不仅仅是改变高度和显示新菜单（所以如果div1的高度为100px，div2的高度为200px ......而不是仅仅改变高度（就像在星巴克上），我的过渡一直向上滑动，然后回到新的高度。
我怎么能拥有它，所以高度只会向上或向下滑动到新的高度......然后当悬停离开时它一直向上滑动。
目前我有一个容器div，具体内容为div。容器div向下滑动，内容div只是隐藏并在需要时显示。
<script>
$('#menu a').hover(function(){
var id =(this.id);
switch(id)
{
case 'blog':
$('.blog').show();
$('#dropdown').slideDown();
break;
case 'videos':
$('.videos').show();
$('#dropdown').slideDown();
break;
case 'tutorials':
$('.tutorials').show();
$('#dropdown').slideDown();
break;
};
},
function(){
$('#dropdown').slideUp();
$('.ddmenu').hide();
});
</script>
------------- FIXED
修正了它。好好砍死它。我决定首先在菜单容器上使用.hover，然后将鼠标悬停在它上面，将高度设置为0 ...但是在函数内部没什么看似有点浪费但是使用.mouseout不起作用：/
继承人代码：
<script>
$('#menu ').hover(function(){
},
function(){
$('#dropdown').stop().animate({height:0},200);
});
$('#menu a').hover(function(){
var id =(this.id);
switch(id)
{
case 'blog':
$('#dropdown').stop().animate({height:200},300);
$('.blog').show();
break;
case 'videos':
$('#dropdown').stop().animate({height:100},300);
$('.videos').show();
break;
case 'tutorials':
$('#dropdown').stop().animate({height:300},300);
$('.tutorials').show();
break;
case 'none':
$('#dropdown').stop().animate({height:0},300);
$('.ddmenu').hide();
break;
};
},
function(){
$('.ddmenu').hide();
});
</script>