Question

我遇到了一个问题，即两个正确独立工作的函数，希望能够获得一些见解。我知道这有id / class声明的todo，我只是不确定如何有效地完成显示/隐藏div并将图像功能合并我的切换如下:(在doc ready中）

  $('.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
   });

我的图片展开折叠功能:(在doc ready中）

 $('.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>

非常感谢任何帮助！

修改

我想在图像中完成的最终结果

单击#showInfo div之前

expand http://desmond.imageshack.us/Himg834/scaled.php?server=834&filename=expand.gif&res=medium
单击#showInfo div后

collapse http://desmond.imageshack.us/Himg12/scaled.php?server=12&filename=collapsezh.gif&res=medium

所以#info div会显示并隐藏onclick，并且图像会打开/关闭以使客户端展开折叠外观

Answer 1

这似乎是唯一有效的方法，我先将图像转换为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
});

我确信这是一种更优雅的方式，但这种方法确实有效

Answer 2

如果我理解正确，这对你有用

$('.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
});

Answer 3

你在找这样的东西吗？


$('.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;
});

Jquery toggleClass和展开/折叠图像

3 个答案: