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

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

​

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

})

​

Answer 2

您提到您不想接触css文件。不如使用jQuery创建一个css规则并将其附加到head标记中如何？

var rule = $('<style>.myclass{width:185px; -webkit-transform:none; transform:none;}</style>');

$('html > head').append(rule);

$('#show').on('click',function(){
    $('.sub-menu').toggleClass('myclass');
});