javascript - jQuery 添加 css 并在单击事件后将其删除

Question

大家好，我想知道如何在点击事件后删除 css 样式，

事实上，在第一次点击时我添加了 css 并删除了一些其他东西，但我希望在第二次点击时在开始时获得相同的 css 代码。

$('#show').click(function (){
  $('.sub-menu').css('width', '185px');
  $('.sub-menu').css('-webkit-transform', 'none');
  $('.sub-menu').css('transform', 'none');

  // and second click 

  $('.sub-menu').css('width', '');
  $('.sub-menu').css('-webkit-transform', 'scale(0)');
  $('.sub-menu').css('transform', 'scale(0)');

})

我不想使用 toggleclass 方法，因为我不想触摸 css 文件。

谢谢。

Answer 1

一个非常简单的选择是保留某种 bool 标记。

var applied = false;

$('#show').click(function() {

  if (!applied) {
  
    $('.sub-menu').css('width', '185px');
    $('.sub-menu').css('-webkit-transform', 'none');
    $('.sub-menu').css('transform', 'none');
    applied = true;

  } else { // and second click 

    $('.sub-menu').css('width', '');
    $('.sub-menu').css('-webkit-transform', 'scale(0)');
    $('.sub-menu').css('transform', 'scale(0)');
    applied = false;
    
  }

})