トグルでイメージを追加および削除する

Question

liがクリックされたときに正しく配置されている追加しています。私のコードはうまく動作しますが、liがトグルされたときにそれらを削除していないので、ページに画像を追加し続けます。何か案は？

$("#offering li").click(function() {        
      $(this).find("ul").animate({height: "toggle"}, 500); 
      $(this).append('<img width="286" height="15" class="offeringselected" alt="Selected" src="images/bg-offering-li-selected.png">'); 
      $(this).toggleClass('current'); 
    }); 

Answer 1

あなたはそれをクリックの上に交互にされる二つの機能を渡し、the .toggle() event methodを使用することができます。

$("#offering li").toggle(function() {        
     $(this).find("ul").animate({height: "toggle"}, 500); 
     $(this).addClass('current') 
       .append('<img width="286" height="15" class="offeringselected" alt="Selected" src="images/bg-offering-li-selected.png">'); 
},function() {        
     $(this).removeClass('current') 
       .children('img.offeringselected').remove(); 
}); 

また、サーバーからのページにイメージを置いて表示したり非表示にしたりする方がよいでしょう。

これを行うには、表示/非表示を実行するthe other version of .toggle()を使用できます。

$("#offering li").click(function() {        
     $(this).find("ul").animate({height: "toggle"}, 500); 
     $(this).toggleClass('current') 
       .children('img.offeringselected').toggle(); // show/hide the img 
}); 

<li>に画像をハードコーディングし、それをCSSで初期display:noneを与えます。