Jquery toggleClass и развернуть / свернуть изображение - PullRequest
Новая
       0

Jquery toggleClass и развернуть / свернуть изображение

0 голосов
/ 03 августа 2011

У меня проблема с объединением двух функций, которые работают независимо друг от друга, я надеялся получить некоторое представление. Я знаю, что это связано с объявлениями id / class, я просто не уверен, как эффективно показать / скрыть div и включить функцию изображения мой тумблер выглядит следующим образом: (в документе готово) 

  $('.acc_container #info').hide();

  $('.acc_container #showInfo').click(function(){
  $(this).toggleClass("active").next().slideToggle("slow"); 
    return false; //Prevent the browser jump to the link anchor
   });

функция развернуть мое изображение: (в документе готово) 

 $('.acc_container #showInfo img').live('click', function () {
    if ( this.src.match('details_close') )
    {

        this.src = "..images/details_open.png";
    }
    else
    {

        this.src = "../images/details_close.png";
    }               
 });

HTML выглядит следующим образом 

 <div id='showInfo'>
  <img src="../images/details_open.png" /> 
  <p>Expand Specific info</p> 
 </div>    
 <div id='info'>
  <p>revealed</p>
 </div>

любая помощь очень ценится!

EDIT

конечный результат того, чего я хочу достичь в образах

до нажатия кнопки #showInfo div

развернуть http://desmond.imageshack.us/Himg834/scaled.php?server=834&filename=expand.gif&res=medium
после нажатия #showInfo div

коллапс http://desmond.imageshack.us/Himg12/scaled.php?server=12&filename=collapsezh.gif&res=medium

Таким образом, #info div показывает и скрывает onclick, и изображение включается / выключается, чтобы дать клиенту развернутый вид свертывания

Ответы [ 3 ]

1 голос
/ 08 августа 2011

Это, похоже, единственное, что сработало, мне сначала пришлось сделать изображение, а затем переключение div 

 $('.acc_container #info').hide();
 $('.acc_container #showInfo img').live('click', function () {

 if ( this.src.match('details_close') )
 {      
  this.src = "../images/details_open.png";
  $('.acc_container #showInfo').toggleClass("active").next().slideToggle("slow");
 }
 else
 {      
  this.src = "../images/details_close.png";
  $('.acc_container #showInfo').toggleClass("active", false).next().slideToggle("slow");
 }          
 return false; //Prevent the browser jump to the link anchor
});

Я уверен, что есть более элегантный способ сделать это, но этот метод работает

0 голосов
/ 03 августа 2011

Вы ищете что-то подобное? 


$('.acc_container #info').hide();

$('.acc_container #showInfo').live('click', function() {
   $(this).toggleClass("active").next().slideToggle("slow");
   var infoImg = $('.acc_container #showInfo img');
    if (infoImg.src.match('details_close')) {
       infoImg.src = '../images/details_open.png';   
    } 
    else {
       infoImg.src = '../images/details_close.png';   
    }
   return false;
});
0 голосов
/ 03 августа 2011

Если я правильно понимаю, это может сработать для вас 

$('.acc_container #info').hide();

$('.acc_container #showInfo').click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    var detailsImage = $(this).find('img');

    if ( detailsImage.src.match('details_close') )
    {

        detailsImage.src = "..images/details_open.png";
    }
    else
    {

        detailsImage.src = "../images/details_close.png";
    }   

     return false; //Prevent the browser jump to the link anchor
});
...