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方法cuz，我不想触摸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');
});