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 回答