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; 
});