Jquery下拉列表可变高度

所以我想创建一个类似于星巴克的下拉菜单。我最初的菜单是一个简单的UL链接，但没有像普通下拉菜单那样的第二张催泪单。我有Jquery来处理链接上的悬停，并用相应的类显示一个div。Ie将鼠标悬停在id为“blog”的链接上。。用类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>

$（'#菜单a'）。悬停（函数（）{
var id=（this.id）；
开关（id）
{
“博客”案例：
$（'.blog'）.show（）；
$（“#下拉列表”）.slideDown（）；
打破
案例“视频”：
$（'.videos'）.show（）；
$（“#下拉列表”）.slideDown（）；
打破
案例“教程”：
$（'.tutorials'）.show（）；
$（“#下拉列表”）.slideDown（）；
打破
};
},
函数（）{
$（“#下拉列表”）.slideUp（）；
$（'.ddmenu'）.hide（）；
});

-------------固定的

修复了它。很好地破解了它。我决定先使用一个。悬停在菜单容器上，悬停时，它会将高度设置为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>

$（'#菜单'）。悬停（函数（）{
},
函数（）{
$（'#dropdown'）.stop（）.animate（{height:0}，200）；
});
$（'#菜单a'）。悬停（函数（）{
var id=（this.id）；
开关（id）
{
“博客”案例：
$（'#dropdown'）.stop（）.animate（{height:200}，300）；
$（'.blog'）.show（）；
打破
案例“视频”：
$（'#dropdown'）.stop（）.animate（{height:100}，300）；
$（'.videos'）.show（）；
打破
案例“教程”：
$（'#dropdown'）.stop（）.animate（{height:300}，300）；
$（'.tutorials'）.show（）；
打破
案例“无”：
$（'#dropdown'）.stop（）.animate（{height:0}，300）；
$（'.ddmenu'）.hide（）；
打破
};
},
函数（）{
$（'.ddmenu'）.hide（）；
});

您需要更改代码并设置动画（）高度，因为

slideUp（）

正是这样做的，它会一直向上滑动。也许可以使用动画高度而不是向上和向下滑动？我刚刚尝试粘贴：$（'#dropdown'）animate（{height:'400px'}，500）；在switch元素中与show一起运行，但它根本不起作用..我的语法错了吗？我已经设置了高度动画，但同样的情况也发生了。我注意到这是因为当#菜单a悬停在上面时调用了该函数…所以在将其向上滑动的链接之间调用了hoverout。我可以在#菜单悬停上进行操作，但我使用e a以获取链接id，该id为我提供了要显示的正确div id。我如何解决此问题？（即使我使用#menu.hover，是否也有办法获取悬停链接id？我也尝试将其包装到#menu.hover函数中，但出于某种原因，为了使其工作，我必须将其悬停在链接上，然后将其悬停出来……然后每次悬停在其上时都可以正常工作。