1

情報を開閉するためのこの単純なトグル機能があります。その横に画像を追加して、展開または閉じた状態で表示したいと考えています。この方法を試しましたが、何も起こりません。私は何が欠けていますか？

$('#slick-software').click(function() {
   $('#slickbox-software').toggle(400);
   $('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png";
   return false;
});

...
...

<a href="#" id="slick-software">
    <img id="slick-img" src="/images/up.png" border="0" align="absmiddle" />&nbsp;&nbsp;
        <b>Software</b><br>
    </a>
<div id="slickbox-software">
    text here
</div>

ご協力いただきありがとうございます。

4

4 に答える 4

2

より良い解決策は、アップ/ダウン画像に CSS を使用することです。これを #slick-software 要素の背景画像として含めることができます (左側のパディングが適用されます)。次に、クリック ハンドラーのクラスを切り替えて、背景画像を変更するか、できればCSS スプライトの背景位置を変更します。また、false を返すとイベントのバブリングが停止するため、false を返すよりも preventDefault を呼び出してデフォルトのクリック動作をオーバーライドすることを好みます。

$('#slick-software').click(function(e) {
   $('#slickbox-software').toggle(400);
   $(this).toggleClass("expanded");
   e.preventDefault();
});

次に、CSS で次のようにします。

#slick-software{
  display: inline-block;
  padding: 0 0 0 20px;
  background: url(img/toggle.png) no-repeat 0 0;
}

#slick-software.expanded{
  background-position: 0 -50px;
}
于 2012-06-14T22:25:17.910 に答える
1

バグはここにあると思います：

$('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png";

ここで 'src' 属性を確認するだけで、実際には変更しないでください。

代わりに次を使用します。

var newSrc = $('#slick-img').attr('src') === "/images/up.png" ? "/images/down.png" : "/images/up.png";
$('#slick-img').attr('src', newSrc);
于 2012-06-14T22:22:19.547 に答える
0

試す：

var src_img = ($('#slick-img').attr('src')=="/images/up.png") ? "/images/down.png" : "/images/up.png";
$('#slick-img').attr('src', src_img)
于 2012-06-14T22:20:26.817 に答える
0

src を変更したら、イメージを強制的に更新したいとします。ここにいくつかのまともな答えがある非常によく似た質問があります：

<img /> の src を jQuery で更新するには?

于 2012-06-14T22:21:10.917 に答える