jQueryのCSSを追加し、クリックイベントの後

Question

Hyの男を、それを削除し、私はCSSを追加し、いくつかの他のものを削除する最初のクリックで実際には、クリックイベントの後にCSSスタイルを削除する方法を知っている

をしたいと思いますが、私は希望します2回目のクリックで、最初と同じ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)'); 

}) 

私はcssファイルには触れたくないcuzをtoggleclassメソッドを使用したくありません。

ありがとうございました。

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