Question

我想只用一个onclick函数来改变css

$('#hamburger').on('click',function(){

    $('nav').toggle(1000);

    $('.col-md-3').css('padding-bottom','30px');
        $('h5').toggle(1000);
    });

我想再次点击显示

 $('.col-md-3').css('padding-bottom','104px');

所以我第一次点击#hamburger我想要col-md-3填充底部30px，当我再次点击并关闭#hamburger时，我希望我的col-md-3填充底部应该是104px。

怎么做？

Answer 1

一种肮脏的方式：

$('#hamburger').on('click',function(){
 $('nav').toggle(1000);

 // check for existing css values
 if ($('.col-md-3').css('padding-bottom') === '30px') {
  $('.col-md-3').css('padding-bottom', '104px');
 } else {
  $('.col-md-3').css('padding-bottom', '30px');
 }

 $('h5').toggle(1000);
});

Answer 2

只需获取元素的当前填充并基于该填充设置新填充 - 如果它是30px，则将其设置为104px，反之亦然。

$('#hamburger').on('click',function(){
  $('nav').toggle(1000);
  $('h5').toggle(1000);

  var padding = $('.col-md-3').css('padding-bottom')
  $('.col-md-3').css(
    'padding-bottom', (padding === '30px')? '104px' : '30px'
  );
});

用jquery切换css

2 个答案: