jquery - 複数のトグルと展開/折りたたみの画像

Question

同じクラス名を持つ 2 つのトグル 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%'});
        }