手风琴效果图片

Question

我想用 jQuery 在图片上应用手风琴效果。

我使用这种语法...

// jQuery
$(document).ready(function() 
{
$("dt.tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
  }
  )
  .next().hide();
}
);
  // Html
  <dt class="tooltip">Mail <img src="../pictures/help.png" title="" alt="" /></dt>
  <dd><!-- Text --></dd>

悬停时，会显示 dd 内容。一切都好！

但我只想对悬停图片应用手风琴效果。我尝试过...

$(document).ready(function() 
{
$(".tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
  }
  )
  .next().hide();
}
);
  // Html
  <dt">Mail <span class="tooltip"><img src="../pictures/help.png" title="" alt="" /></span></dt>
  <dd><!-- Text --></dd>

但它不起作用！

任何帮助将不胜感激。

多谢。

文森特

Answer 1

将您的图像设置为 display:none; 并添加该行

 $('dt.tooltip img').toggleClass("active").toggle();

，以便您的最终代码如下所示

$(document).ready(function()
{
$("dt.tooltip")
  .addClass("js")
  .hover(function()
  {
     $(this).toggleClass("active").next().toggle();
      $('dt.tooltip img').toggleClass("active").toggle();
  }
  )
  .next().hide();
}
);

检查工作示例 http://jsfiddle.net/fLtF3/