Question

如何添加图像而不是＆lt;＆lt;隐藏左侧栏，右箭头＆gt;＆gt;显示隐藏的侧边栏而不是显示相同的（＆lt;＆lt;＆lt;＆lt;）箭头

Answer 1

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');
});

Answer 2

这是你想要的吗？使用←和→代替“切换”一词：

$('#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/

Answer 3

$('#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('<<');
})

像这样

使用jQuery将图像添加到切换（隐藏/显示）侧边栏

3 个答案: