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