Javascript 使用jquery切换css

我只想用一个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');

所以，当我第一次点击

#汉堡

时，我希望我的

col-md-3

填充底部30px，当我再次点击并关闭

#汉堡

时，我希望我的

col-md-3

填充底部应该是104px

怎么做

一种肮脏的方式：

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

---

只需获取元素的当前填充，并在此基础上设置新的填充-如果是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'
  );
});

---

如何识别汉堡何时打开？应该有一些区别的因素可能是重复的