2016-03-14 9 views
5

ich brauche slidedown Funktion von jQuery zu verwenden, die den Inhalt animiert werden erfordert unter Klasse „.Hide“ zu setzen,Bootstrap-Blockierung jquery Funktion

für .Hide ich das CSS in meiner Gewohnheit hatte:

.hide { 
    display: none; 
} 

die mit Bootstrap CSS kollidierten wie es enthält:

.hide { 
    display: none !important; 
} 

somit als ich diese beiden Sheets verknüpft, slidedown was'nt arbeiten, dann versucht i diffrent Variationen .Hide sowohl f ile, endlich entfernen .hide aus meiner benutzerdefinierten css-Datei vollständig bearbeitet,

so ist meine Frage, warum .Hide in benutzerdefinierten CSS beeinflussen die Ergebnisse, wenn die Eigenschaften in Bootstrap ".Hide" und benutzerdefinierte css ".Hide" definiert sind genau das gleiche außer "! wichtig" zusätzlich das (ich denke, bitte korrigieren, wenn ich falsch liege) impliziert, dass benutzerdefinierte Selektor bevorzugt würde?

Ich versuche, die Arbeitsversion meines Codes mit codepen zu teilen, aber ich weiß nicht, warum auf meinen Code noch does'nt WROK codepen: http://codepen.io/anon/pen/RaGJwE

Antwort

2

Die !important immer sehr stark ist. Es könnte einfach umgangen werden, wenn Sie danach eine display: block !important; verwenden.

Der einfachste Weg wäre, die Klassen "hide" oder "hidden" nicht zu verwenden, auf die Bootstrap zielt. Ändern Sie einfach die Klasse zu "hidedit" oder etwas anderes wie in dieser aktualisierten Geige:

+0

danke für Hilfe @Simon Kraus, aber ich kann immer noch keine Antwort auf meine Fragen finden, warum die Verwendung von .Hide Probleme erstellen, wenn Definitionen von beiden Fellen ist das gleiche, plus der Bootstrap-Hide ist wichtig, um benutzerdefinierte Css-Versteck zu verwenden. – rjbir

+1

Wenn Sie haben, verstecken Sie sich in Ihrer CSS-Datei in Zeile 1 mit Display: none; und .Hide in Zeile 10 mit Display: Block; der erste würde überschrieben werden. Wenn Sie wichtig verwenden, hat dies mehr Gewicht. Sie könnten es einfach mit einem anderen wichtigen in einer späteren Zeile überschreiben. Gleiches gilt für verschiedene CSS-Dateien. Es wird hierarchisch überschrieben. und jquery verwendet Inline-Stile in seiner show() und hide(). Dieser Inline-Stil hat mehr Gewicht als die Klassen in Ihren Stylesheets, aber weniger Gewicht als die! wichtigen Deklarationen. hoffe, das ist irgendwie verständlich: D –

+0

gut als ein Neuling bei Front End Tech, das hat mich dazu gebracht, einige neue Dinge zu verstehen, auf meinem Weg, mehr über Css Hierarchien zu erforschen .. Danke .. @Simon Kraus .. – rjbir