jQuery hide() Methode zeige Element mit Anzeige: keine! Wichtig

Question

Ich habe ein Problem.

Ich habe ein Element einer Klasse zugeordnet, die folgende CSS hat:

.cls { 
    display:none !important; 
} 

Wenn ich versuche, dieses Element zu zeigen, mit jQuery

$(".cls").show(); 

Es funktioniert nicht.

Kann mir bitte jemand helfen, dieses Element zu verstecken?

Answer 1

$('.cls').attr('style','display:block !important'); 

DEMO

Answer 2

2 Möglichkeiten dies zu tun,

1) Entfernen Sie die !important von Ihrem .cls Klasse,

.cls{ 
    display: none; 
} 

Aber ich nehme an, dann würden Sie diese an anderer Stelle verwendet haben Es könnte also eine Regression verursachen.

2) Was Sie könnten alternativ tun, ist, eine andere Klasse haben und wechseln, dass

.cls-show{ 
    display: block !important; 
} 

Und dann in Ihrem Javascript,

$('.cls').addClass(".cls-show"); 

Dann, wenn Sie es brauchen wieder zu verstecken, Sie können

$('.cls').removeClass('.cls-show'); 

Dies wird Ihnen Ihr Markup sauber und gut lesbar

01 halten helfen

Answer 3

! Wichtig; Entfernen Sie alle Regeln und wenden Sie die CSS ! Wichtig an;. Also in Ihrem Fall ignoriert es alle Regeln und Anwendung Anzeige: keine.

dies also tun:

.cls { 
    display:none 
} 

Siehe this also

Answer 4

Wenn die einzige Eigenschaft in der Auswahl CLS-Klasse ist die Anzeige ein, können Sie dies tun können, und braucht keine zusätzliche Klassen hinzuzufügen, oder Modifizieren Sie den Inline-Stil.

ihnen zu zeigen:

$('.cls').removeClass("cls").addClass("_cls"); 

sie verstecken:

$('._cls').removeClass("_cls").addClass("cls"); 

Answer 5

gerade genau dieses Problem hatte, hier ist was ich tat zuerst, ich eine andere Klasse zu dem Element hinzugefügt, wie zum Beispiel:

<div class="ui-cls cls">...</div> 

Dann im javascript:

$('.ui-cls').removeClass('cls').show(); 

Das Schöne daran ist, dass Sie auch diesen Code, es zu verbergen wieder haben:

$('.ui-cls').hide(); 

und es ist egal, wie oft Sie/show verstecken, wird es noch

arbeiten