イメージは元のソースに戻りますOnClick？

Question

私はjQuery/JavaScriptで拡張および折りたたみシステムのセットアップを行っています。 DIVをクリックすると、DIV内の画像がその状態を変更します。しかし、そのDIVをもう一度クリックしたように見えると、イメージは元の状態に戻りません。それは別の状態に固執している。

注：別の「ITEM」をクリックすると、アコーディオン効果を作成するために同じページの複数のインスタンスにスクリプトがあり、以前選択されたDIVの元の状態に戻ります。ここで

はjsFiddleです：http://jsfiddle.net/4Dtd8/

はありがとうございました！

Answer 1

使用CSSその後、あなただけに.open.closedからアイテムのクラスを切り替えると、CSSがイメージを変える処理させることができます。h1タグの背景に画像を配置します。

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/

Answer 2

それは別の状態で立ち往生だ理由は、この行ではありません。どんなにそれははであるべき状態

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

、これは画像のソースに影響を及ぼし、最終的なコードです。したがって、ソースは常にその行に指定されているものに設定されます。

Answer 3

コンテンツの可視性を監視して、どのアイコンを表示するかを決定できます。

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

Answer 4

私は、それが展開または縮小し、その状態を見つけるために、値をチェックされている場合は、保存する画像タグのisExpanded attrのカスタムを追加しました。

DEMOここ

のjQuery（ 'アイテム.expandacc。 '））（関数（）{
jQueryの（この）.siblings（' contentacc。 'をクリックslideToggle（' 正常'）;。。

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