そこで、スターバックスに似たドロップダウン div メニューを作成したいと思います。私の最初のメニューはリンク付きの単純な UL ですが、通常のドロップダウンのような 2 番目のティア リストはありません。リンクのホバーを処理し、対応するクラスで div を表示する Jquery があります。つまり、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>