多個切換和展開/摺疊圖像

Question

我有兩個具有相同類名稱的切換div。當我點擊其中的一個時，右側的加號不會被替換爲減號，除非我點擊了其中的兩個。

http://jsfiddle.net/adige72/rxW3H/

HTML：

<div class="collapseTitle">Open 1<div class="symbol">&nbsp</div></div> 
<div class="collapseContent">Content 1</div> 


<div class="collapseTitle">Open 2<div class="symbol">&nbsp</div></div> 
<div class="collapseContent">Content 2</div> 

JS：

var $coll = $('.collapseTitle'); 

$coll.click(function() { 
    $(this).nextUntil('.collapseTitle').toggle('fast', callbackFn); 
     function callbackFn(){ 
      $('.collapseContent').is(":hidden") ? $coll.find('.symbol').css({'background-position': '0 50%'}) : $coll.find('.symbol').css({'background-position': '-36px 50%'}); 
     } 

$(this).toggleClass("expanded collapsed"); 


}); 

$coll.addClass('expanded').click(); 

在此先感謝。

Answer 1

試試這個。

var $coll = $('.collapseTitle'); 

$coll.click(function() { 
    var $this = $(this); 
    $(this).nextUntil('.collapseTitle').toggle('fast', function() { 
     $this.next('.collapseContent').is(":hidden") ? $this.find('.symbol').css({ 
      'background-position': '0 50%' 
     }) : $this.find('.symbol').css({ 
      'background-position': '-36px 50%' 
     }); 
    }); 
    $this.toggleClass("expanded collapsed"); 
}); 

$coll.addClass('expanded').click();​ 

http://jsfiddle.net/wirey00/rxW3H/1/

我固定下列

$(this).nextUntil('.collapseTitle').toggle('fast', callbackFn); // <-- just put the callback function here 
     function callbackFn(){ 
      // this is checking both .collapseContent.. you need to start from the current clicked .collapseTitle 
      $('.collapseContent').is(":hidden") ? $coll.find('.symbol').css({'background-position': '0 50%'}) : $coll.find('.symbol').css({'background-position': '-36px 50%'}); 
     }