jQueryのドロップダウン

Question

ここ

は私が作るしようとしていますダウンjqueryのドロップです：http://jsfiddle.net/qYMq4/2/

は基本的に私はちょうど、リンクを介してユーザマウスを置いたとはダウン滞在したときにドロップダウンするのdivをしたい場合を除き離れリンクiからマウスやドロップされたdivの上で、そしてdivから離れています。したがって、ほとんどの場合、標準のドロップダウンメニューに似ていますが、ウェブサイトのナビゲーションの多くで見ることができますが、これはちょっとしたアニメーションしかないので、すぐには表示されません。

私はそれが正しく機能していないことがわかるので、それはひどく難しいと思っています。どんなアドバイスですか？あなたのご意見ありがとうございます。

Answer 1

slideDown()とslideUp()のメソッドを使用できます。これらのメソッドは使いやすく簡単です。また、windowSetTimeoutを使用することもできます。あまり知られていない機能は、タイムアウトを取り消すことができる番号を返します。これを使用して、ユーザーがスクロールダウンしたときにdivを開いたままにすることができます。ここから借りたこのアプローチのためにいくつかのインスピレーション：http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

$(document).ready(function() { 
    $('.slidedown').hide(); 
    var timeout = 500; 
    var closetimer = 0; 

    $('a.top-link-cart, .slidedown').mouseover(function(){ 
     cancel_timer(); 
     $('.slidedown').slideDown(1000); 
    }); 

    $('a.top-link-cart, .slidedown').mouseout(function(){ 
     closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout); 
     }); 

function cancel_timer(){ 
if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null; 
    } 
} 
}); 

http://jsfiddle.net/P567S/7/

Answer 2

You can see a working demo of the following here.

オーバーホバリングするとき、それは良く振る舞うように私はこのような状況でmouseenter^[DOCS]とmouseleave^DOCSを好みます子供。

<div class="mask-layer"> 
    <a class="top-link-cart" href="http://www.w3schools.com/">Test</a> 
    <div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div> 
</div> 

は、私は、あなたのJavaScriptにを再構築：あなたが滑り落ちる灰色の領域にカーソルを合わせると、以下のようにそれはmouseleaveと考えられていないようにホバーは、リンクの親のdivの上にあるように、私はあなたのHTMLを再構築しましたホバーイベントの.mask-layerを使用して、次のようにslideUp^[DOCS]とslideDown^[DOCS]でアニメーションを簡素化：

$('.slidedown').hide(); 
$('div.mask-layer').mouseenter(function() { // enter animation 
    $('.slidedown').slideDown(600); 
}).mouseleave(function() { 
    setTimeout(function() { 
     $('.slidedown').slideUp(600); 
    }, 200); 
}); 

Answer 3

ここをクリックしてクリックアクションのドロップダウンメニューを探している場合は

//toggle navbar on click. 
$('//my link').click(function(event) { 
event.stopPropagation(); 
$('//sub menu container').toggle(); 

}); 

//to close dropdown menu when clicked out it. 
$(document).click(function() { 
$('//sub menu container').hide(); 
}); 

あなたにはうってつけ!!