Question

Hy伙计们，我想知道点击事件后如何删除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

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

＆＃13;

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

＆＃13;

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

jQuery添加css并在click事件后删除它

2 个答案: