Question

我正在这里制作一个stye切换器http://jsfiddle.net/thiswolf/n3weg/1/，可以在这里http://jsfiddle.net/thiswolf/n3weg/1/show看到，由于某种原因我无法隐藏

这是我正在使用的jquery代码

$(document).ready(function(){
$('#styleswitch').addClass('closed');
$('.fixedpoint').css({
    'background-color':'red',
  'position': 'fixed',
  'width': '30px',
  'height': '30px',
  'left': '97%',
  'top': '20%'
});
$('.fixedcol').css({
    'background-color':'pink',
  'position': 'fixed',
  'width': '200px',
  'height': '100px',
  'left': '100%',
  'top': '20%'
});
$('.fixedpoint').on('click',function(){
if($('.fixedpoint').hasClass('closed')){
$('#styleswitch').addClass('open');
$(".fixedcol").css({'padding-right':'1px','height':'300px'}).animate({left:'77.12%'},350);
}else if($('.fixedpoint').hasClass('open')){
$('#styleswitch').removeClass('open');
$('#styleswitch').addClass('closed');
$('.fixedcol').css({
    'background-color':'pink',
  'position': 'fixed',
  'width': '200px',
  'height': '100px',
  'left': '100%',
  'top': '20%'
});
}
});
});

为什么不能用我正在使用的代码隐藏它？。

Answer 1

尝试：

$('.fixedpoint').on('click', function () {
    if ($('#styleswitch').hasClass('closed')) {
        $(".fixedcol").css({
            'padding-right': '1px',
            'height': '300px'
        }).animate({
            left: '77.12%'
        }, 350);
    } else if ($('#styleswitch').hasClass('open')) {                
        $('.fixedcol').css({
            'background-color': 'pink',
                'position': 'fixed',
                'width': '200px',
                'height': '100px',
                'left': '100%',
                'top': '20%'
        });
    }
    $('#styleswitch').toggleClass('open closed');
});

Updated fiddle here.

隐藏和显示固定的div

1 个答案: