手风琴对画面的影响

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/

处的工作示例