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

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