多个切换和展开/折叠图像

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