Ausblenden oder entfernen eines div-Klasse bei mobile viewport?
In Erster Linie, ich bin sehr bewusst von CSS media queries. Mein problem ist Folgendes: Wenn Sie die div-Klassen, die gestapelt in einem div; Beispiel:
<div class="class1 class2"></div>
Und den Sie entfernen möchten "class2" @media (max-width: 768px)
Eine Ausgabe von:
<div class="class1"></div>
...sobald die 768px Schwelle erreicht wurde.
So weit ich gekommen bin mit nichts anderes als das nicht-funktionale code:
<script>
jQuery(document).resize(function () {
var screen = $(window)
if (screen.width < 768) {
$(".class2").hide();
}
else {
$(".class2").show();
}
});
</script>
Ich bin wirklich eine harte Zeit, eine Antwort zu finden, das funktioniert für diese. Ich will nicht zu blockieren den gesamten div Inhalt! Entfernen Sie einfach eine der beiden Klassen.
- Wäre nicht "responsive design" in diesem Fall bedeuten, setzen der styles für
.class2
in@media (min-width: 768px) { … }
entfernen, sondern die Klasse per JS? I. e. Sie ändern sich nicht, der DOM, Sortieren Sie die Stile in Haltepunkte.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mir nicht sicher, ob ich bekomme, aber sind Sie nur versuchen zu wechseln eine Klasse?
GEIGE
jQuery hat addClass(), removeClass() und toggleClass() Methoden leicht zugänglich.
Beachten Sie, dass
screen
ist bereits definiert, in javascript.Verwenden Sie die jQuery .removeClass() Methode:
ODER:
addClass
. Testen Sie es, Sie werden nicht am Ende mit '<div class="class1 class2 class2">'.$('<div class="class2">').addClass("class2")
zurück<div class="class2">
Und hören Sie zu den
window
nicht diedocument
, so können Sie den code so ändern, das folgende:Natürlich, dies wird nur Umschalten
class2
richtig wenn Sie möchten, dass alleclass1
Elemente habenclass2
wenn die Bildschirmbreite größer ist als die 768. Wenn Sie das nicht wollen, fügen Sie einfach eine zusätzliche Klasse, die hat keinerlei Wirkung, sondern wirkt als Markierung, die angibt, welche Elemente sollteclass2
.document
zuwindow
, wenn Sie überprüfen, um zu sehen, wenn das Fenster in der Größe geändert wird. Das Dokument wird wahrscheinlich immer noch die gleiche Größe, auch wenn das Fenster in der Größe geändert wird, so dass der event-handler wird gar nicht ausgelöst werden.