0

.slideToggle を使用して、画像がクリックされたときにコンテンツを表示/非表示にします。コンテンツが表示されると一度変更されますが、コンテンツを非表示にするために再度クリックしても元の画像に戻りません。ここにありません。どんな助けでも大歓迎です。

jQuery:

$(document).ready(function() {

    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        $("#bg").attr('src',"images/box-arrow-down.jpg");
        return false;

    });

HTML:

<div class="box">
  <div style="width:1100px;height:100px;margin-left:40px;">
    <span style="float:left;"><a href="#" id="toggle1"><img src="images/box-arrow-up.jpg" height="16" width="17" alt="arrow" id="bg" style="margin-top:40px;" /></a></span>
  </div>
  <div class="toggle1" style="display:none;width:1100px;padding:0px;margin-left:8px;">
  <div class="boxTime">09:00</div>
  </div>
</div>
4

1 に答える 1

1

オリジナルを参照していませんsrc。これには何百もの異なる方法がありますが、いくつかの例を次に示します。

次のようなことができます。

$(document).ready(function() {
    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        var src = $("#bg").attr('src') == "images/box-arrow-down.jpg" ? "images/box-arrow-up.jpg" : "images/box-arrow-down.jpg";
        $("#bg").attr('src', src);
        return false;

    });
});

デモ: http://jsfiddle.net/dirtyd77/NCqRk/

またはこのようなもの：

$(document).ready(function() {
    var originalImage = $("#bg").attr('src');

    $('#toggle1').click(function() {
        $('.toggle1').slideToggle('1100');
        var src = $("#bg").attr('src') == originalImage ? "images/box-arrow-down.jpg" : originalImage;
        $("#bg").attr('src', src);
        return false;

    });
});

デモ: http://jsfiddle.net/dirtyd77/NCqRk/1/

于 2013-04-10T21:58:11.507 に答える