Jquery toggleClass和展开/折叠图像

Question

我有一个问题结合了两个独立正确工作的函数，希望能够获得一些见解。我知道这有待办事项与ID /类声明，我只是不知道如何有效地实现显示/隐藏一个div并具有图像功能的结合 我的切换如下：（在doc就绪）

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

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

任何帮助是极大的apprec iated！

编辑

什么，我想在图像点击

之前完成最终的结果#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; 
});