图片返回原始来源 OnClick？答案

【问题标题】：Image returns to original source OnClick?图片返回原始来源 OnClick？
【发布时间】：2012-01-18 17:29:24
【问题描述】：

我在 jQuery/JavaScript 中有一个展开和折叠系统设置。单击 DIV 后，DIV 中的图像会更改其状态。但是，当您似乎再次单击该 DIV 时，图像不会返回到其原始状态。它卡在它的替代状态。

注意：我有脚本在同一个页面的多个实例中创建手风琴效果，当你点击不同的“ITEM”时，图像会恢复到之前选择的DIV的原始状态。

这里是 jsFiddle：http://jsfiddle.net/4Dtd8/

非常感谢！

【问题讨论】：

只是对代码的注释，如果您将jQuery 替换为$，您可能会发现更容易阅读。至少对我来说更容易理解（已经做了很多 jQuery，实际上看到这些话让我分心）。
@Kekoa：如果我所有的 jQuery 语句都以美元符号 ($) 开头，那么发生冲突和错误的空间就会大得多。我建议在每个语句之前使用 jQuery。
除非您加载另一个库，例如使用$ 的原型，否则您应该没有冲突。 docs.jquery.com/Using_jQuery_with_Other_Libraries

标签： javascript jquery html accordion

【解决方案1】：

您可以监控内容的可见性以确定应显示哪个图标。

http://jsfiddle.net/4Dtd8/7/

jQuery('.item .expandacc').click(function() {
    if (jQuery($(this).next('.contentacc').is(':visible')) {
        jQuery('.expandacc h1 img').attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png');
    }
    else {
        jQuery(this).find('img').attr('src', 'http://www.jornal.us/icons/expandIcon.jpg');
    }
    jQuery('.item .expandacc').not(this).siblings('.contentacc').slideUp('normal');
    jQuery(this).siblings('.contentacc').slideToggle('normal');
});

【讨论】：

但是有多个类，如何实现我的目标？例如：jsfiddle.net/4Dtd8/6
另外，由于幻灯片动画，我认为 .is(':visible') 将始终为真。 jsfiddle.net/skram/4Dtd8/8
@AaronBrewer - 使用 next 以便它只检查下一个内容块。 jsfiddle.net/4Dtd8/7
@SKS - 您正在检查 slideToggle 已经执行后的值。您必须使用我的回答中的操作顺序。

【解决方案2】：

使用 css 将图像放置在 h1 标签的背景中。然后，您只需将项目的类从 .open .closed 切换到并让 css 处理更改图像。

jQuery('.item .expandacc').click(function() {
    jQuery('.item .expandacc').not(this).removeClass("open").addClass("closed")
        .siblings('.contentacc').slideUp('normal');
    jQuery(this).next('.contentacc').slideToggle('normal');
    jQuery( this ).toggleClass("closed").toggleClass("open");
});

http://jsfiddle.net/petersendidit/4Dtd8/9/

【讨论】：

【解决方案3】：

卡在备用状态的原因是这一行：

jQuery(this).find('img').attr('src','http://www.jornal.us/icons/expandIcon.jpg');

无论它应该处于什么状态，这都是影响图像源的最终代码。因此源始终设置为该行中指定的内容。

【讨论】：

那么你建议我做什么来解决这个问题？要在选择不同的 DIV CLASS 后让图像返回其原始状态，但在选择该类时仍将图像保持在替代状态？谢谢！

【解决方案4】：

我为图像标签添加了一个自定义属性isExpanded，以便在展开或折叠时保存并检查值以查找其状态。

DEMO这里

jQuery('.item .expandacc').click(function() {
jQuery(this).siblings('.contentacc').slideToggle('normal');

    var $img = jQuery(this).find('img');
    var isExpanded = $img.attr('isExpanded');

    // For some browsers, `isExpanded` is undefined; for others,
    // `isExpanded` is false.  Check for both.
    if (typeof isExpanded === 'undefined' || 
            isExpanded === false || 
                 isExpanded == 'true') {
        $img.attr('src', 'http://www.jornal.us/icons/expandIcon.jpg');

        $img.attr('isExpanded', 'false');
    } else {
        $img.attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png');

        $img.attr('isExpanded', 'true');
    }

【讨论】：