JQuery noob：在懸停時顯示div，單擊以切換顯示

Question

一直在玩這個幾個小時，但無法弄清楚。

jsFiddle example here。

基本上我希望這顯示在懸停，並單擊它來切換是否顯示或不顯示。我認爲這是與display:block;一起完成的方式，但我無法實現。

感謝您的任何幫助。

Answer 1

目前你在.click()使用$(this)，但是這是<button>（#related-btn）不是<div>（#show-hide），我想你想要的是這樣的：

$("#related-btn").hover(function() { 
    $("#show-hide").toggle("slow"); 
}).click(function() { 
    $("#show-hide").toggle(); 
}); 

You can see an updated example here

或者，如果你想在這兩種情況下動畫，這是有點短：

$("#related-btn").bind('mouseenter mouseleave click', function() { 
    $("#show-hide").toggle("slow"); 
}); 

或者......如果你想不切換，但有一個點擊「銷」，你可以是這樣做的：

$("#related-btn").hover(function() { 
    if(!$(this).data('pinned')) 
    $("#show-hide").toggle("slow"); 
}).click(function() { 
    $(this).data('pinned', !$(this).data('pinned')); 
}); 

You can see a demo of that here