Аккордеонный эффект на картинке - PullRequest
Новая
       3

Аккордеонный эффект на картинке

1 голос
/ 06 марта 2011

Я хочу применить к изображению эффект аккордеона с помощью 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>

Но это не работает!

Любая помощь будет принята с благодарностью.

Большое спасибо.

Винсент

1 Ответ

2 голосов
/ 06 марта 2011

Установите ваше изображение на 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/

...