0

所以我想创建一个类似于星巴克的下拉 div 菜单。我的初始菜单是一个带有链接的简单 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>

- - - - - - -固定的

解决它。很好破解它。我决定首先在菜单容器上使用 .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>
4

0 回答 0