0

如何添加图像而不是 << 隐藏左侧栏，向右箭头 >> 显示隐藏的侧栏而不是显示相同的 (<<) 箭头

http://jsfiddle.net/6FMZY/449/

4

3 回答 3

2

那里：http: //jsfiddle.net/M6xJT/

CSS：

.left {
    background: url('http://icons.iconarchive.com/icons/pixelmixer/basic/32/left-icon.png') no-repeat;
    width: 32px;
    height: 32px;
    display:block;
}

.right {
    background: url('http://icons.iconarchive.com/icons/pixelmixer/basic/32/right-icon.png') no-repeat;
    width: 32px;
    height: 32px;
    display:block;
}

jQuery：

$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});

    $(this).removeClass('left').addClass('right');
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});

    $(this).removeClass('right').addClass('left');
})​;

​</p>

于 2012-06-25T15:21:38.303 回答
0

这是你想要的吗？使用&larr;and&rarr;代替单词“Toggle”：

$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});
    $('#toggle').html('&rarr;');
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});
    $('#toggle').html('&larr;');
})​

http://jsfiddle.net/mblase75/6FMZY/451/

于 2012-06-25T15:21:53.440 回答
0 
$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});
    $('#B > a').html('>>');
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});
    $('#B > a').html('<<');
})​

像这样

于 2012-06-25T15:22:05.033 回答