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