JQuery noob：悬停时显示div，单击以切换显示答案

【问题标题】：JQuery noob: Show div on hover, click to toggle displayJQuery noob：悬停时显示div，单击以切换显示
【发布时间】：2010-05-28 19:36:13
【问题描述】：

玩了几个小时，还是搞不明白。

jsFiddle example here.

基本上我希望它在悬停时显示，然后单击它来切换它是否显示。我认为这是使用 display:block; 的方法，但我无法让它工作。

感谢您的帮助。

【问题讨论】：

标签： jquery html css

【解决方案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

【讨论】：

@Kyle - 欢迎 :) 这就是你想要的效果吗？如果需要，我可以稍微调整一下示例，如果有什么不完全是您想要的，请告诉我。
再次感谢，基本功能已经存在，但是当您单击它时，它会重新启动该功能。我认为。（jq noob）我追求的更像是悬停：显示，单击（和鼠标离开）：保持显示，再次单击：隐藏..如果你理解？
@Kyle - 尝试答案中的最后一个示例，有一个演示链接，这是“固定它”的代码，因为没有更好的术语。 - 这是一个稍微修改的版本，取消固定时立即隐藏：jsfiddle.net/rfyxD/4
哇，这正是我所追求的！非常感谢！如果可以的话，我会再次 +1。