0

私は動作するトグルスポイラーを持っています-コードを提供してくれたエイドリアンに感謝します。別のスポイラーを開くとすぐに閉じます。

右側にプラスの画像を追加しました。プラスを開いたらマイナスの画像に変更し、閉じたらプラスに戻すか、スポイラーを切り替えます。

これは私が現在持っているものです：

http://justxp.plutohost.net/slyfiles/index.html

スポイラートグルでプラス画像をマイナス画像に変えて、スポイラートグルを閉じると元に戻すにはどうすればよいですか？

私のコード：

 <div id="spoiler1" data-hidden="hide1" class="spoiler"><span class="featurelist_2-text-margin">Networks</span><div id="plus"><img src="http://cdn4.iconfinder.com/data/icons/iconic/raster/12/plus.png"></div>
 </div>
<div id="hide1" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>

<div id="spoiler2" data-hidden="hide2" class="spoiler"><span class="featurelist_2-text-margin">Payment Avarge</span></div>
<div id="hide2" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>


<div id="spoiler3" data-hidden="hide3" class="spoiler"><span class="featurelist_2-text-margin">Control Panel - SlyPanel</span></div>
<div id="hide3" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p></div>

<div id="spoiler4" data-hidden="hide4" class="spoiler"><span class="featurelist_2-text-margin">Security</span></div>
<div id="hide4" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more. 
We do a SQL backup every hour to protect us from our data being lost.</p>
</div>

JS：

<script>
$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});
</script>

CSS

.featurelist_2-text-margin{
    margin-top: 10px;
    position: absolute;
    margin-left: 20px;
    text-align: left;
    color: #259acb;
}

.spoiler {
        font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
                margin-top: 3px;
                cursor: pointer;
                    min-width: 511px;
                        position: relative;
}

.hide{
    font-size: 15px;
    background-color: #dedede;
    border: 1px solid #c1c1c1;
    width: 530px;
    height: auto;
    color: #262626;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
                margin-top: 3px;
    display: none;
}

#plus {
float: right;
margin-top: 17px;
margin-right: 10px;
}

Hide1,2,3,4は空です。

ライブプレビュー： http： //justxp.plutohost.net/slyfiles/index.html

ありがとう！

4

1 に答える 1

1

これを試して..

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();

    var $img = $(this).find('img');
    if( $img.attr('src').indexOf('plus') > -1){

       $img.attr('src', 'http://cdn4.iconfinder.com/data/icons/iconic/raster/12/minus.png')
    }
    else{
       $img.attr('src', 'http://cdn4.iconfinder.com/data/icons/iconic/raster/12/plus.png')
    }

});

画像のsrcがplus.pngとminus.pngで終わると想定しています

于 2012-10-03T00:54:26.080 に答える