JQuery noob：在悬停时显示div，单击以切换显示 [英] JQuery noob: Show div on hover, click to toggle display

问题描述

jsFiddle example here。

基本上我希望这个显示在悬停上，然后点击它来切换它是否显示。我认为这是通过 display：block; 来实现的方法，但我无法实现它。

解决方案

目前您正在使用 $（this）在 .click（） ，但这是<按钮> （＃related-btn ）而不是< div> （＃show-hide ），我想你想要的是这个：

  $（＃related-btn）。hover（function（）{
 $（＃show-hide）。toggle（slow） ; 
}）。click（function（）{
 $（＃show-hide）。toggle（）; 
}）; 
  

你可以在这里看到一个更新的例子

或者如果你想在两种情况下都使用动画，这会更短一些：

$ b $

  $（＃related-btn）。bind（'mouseenter mouseleave click'，function（）{
 $（＃ （slow）; 
}）; 
  

或者...如果您不想切换它，但点击引脚你可以这样做：

  $（＃related-btn）。hover（function（）{
（if（！$（this）.data（'pinned'））
 $（＃show-hide）。toggle（slow）; 
}）。click（function（）{ 
 $（this）.data（'pinned'，！$（this）.data（'pinned'））; 
}）; 
  

你可以在这里看到一个演示

been playing with this for a few hours and can't figure it out.

jsFiddle example here.

Basically I want this to show on hover, and click it to toggle whether it is displayed or not. I thought this was the way to do it with display:block;, but I can't get it to work.

Thanks for any help.

解决方案

Currently you're using $(this) in the .click(), but that's the <button> (#related-btn) not the <div> (#show-hide), I think what you want is this:

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

You can see an updated example here

Or if you wanted it animated in both cases, this is a bit shorter:

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

Or...if you want not to toggle it, but have a click "pin" it, you can do that like this:

$("#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

这篇关于JQuery noob：在悬停时显示div，单击以切换显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！