javascript - 一旦内容区域发生滑动，更改跨度的图像来源

Question

我目前遇到一个问题。 我在网站上制作了某种 Accordion 。滑动工作一切正常，但是，当我尝试编写一个函数来更改图标的图像 src 时，它不起作用。

我有3个span6，ID为swap1到swap3。 swap1 在开始时可见，swap 2 和 3 隐藏。

这是我的标记，此处仅用于 swap1。 swap2 和 swap3 的构建方式相同:

<div id="swap1" class="span6">
     <h3>Lorem Ipsum dolor sit amet?
        <span class="expand"><img src="images/minus.png" /></span>
     </h3>
     <p>Lorem Ipsum dolor sit amet.....</p>
</div>

这是 jQuery:

$(document).ready(function() {
    console.log('logging');
    $('#swap2.span6 p').hide();
    $('#swap3.span6 p').hide();
    $(function() {
        $('#swap1 .expand').click( function() {
             $('#swap1.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/plus.png').load(function();
        });
        $('#swap2 .expand').click( function() {
             $('#swap2.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
        $('#swap3 .expand').click( function() {
             $('#swap3.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
     });
 });

首先，滑动有效，图像 src 根本没有改变。其次，我对你滑倒后发生的事情感到困惑。图像将保持更改后的状态，并且无论状态如何(展开/折叠)都不会变回原来的状态。我目前陷入困境，我试图查找其他 Accordion 的工作原理，但没有任何帮助。

http://jsfiddle.net/K2GpC/2/

Answer 1

如果您不想使用jQuery UI accordion我建议您将 jQuery 更改为以下内容，因为它将允许任意数量的 div 而不仅仅是您拥有的三个:

$(function() {
    var divs = $('.span6'),
        content = divs.children('p');

    content.hide();
    content.eq(0).show();

    divs.click(function() {
        var thisContent = $(this).children('p');
        content.not(thisContent).slideUp(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/plus.png');
        });
        thisContent.slideDown(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/minus.png');
        });
    });
});

如果您还有其他带有 span6 类的 div，那么您需要为您的折叠式 div 提供另一个类名称，然后使用该选择器

Example