einen auf Klick spezifischen Stil Medienabfrage Anwenden

Question

mein Problem hier:

ich ein Menü auf der linken Seite haben. Wenn der Bildschirm zu klein ist, benötigt das Menü zu viel Platz, so dass ich es "minimiere". Um dies zu tun, verwende ich einen anderen Stil, wenn die Bildschirmbreite kleiner als eine bestimmte Größe in Pixel ist. (mit Medienabfrage).

Aber ich möchte Benutzern erlauben, das Menü zu minimieren, auch auf einem großen Bildschirm, mit einer Taste. Das bedeutet, dass Sie denselben Stil wie in meiner Medienabfrage anwenden.

Ich weiß, ich könnte eine Klasse zum Container hinzufügen, indem ich auf die Schaltfläche klicke, und den Code aus der Medienabfrage für diese Klasse kopieren/einfügen, aber wahrscheinlich gibt es einen besseren Weg als den Code zu duplizieren .

Vorerst:

/* Classic style */ 
    #menu{ 
    width:100px; 
    background-color:#ddd; 
    padding:15px; 
    } 
    #menu li{ 
    color:red; 
    padding:20px 20px; 
    } 

/* Style when screen less than 600px */ 
    @media (max-width: 600px) { 
    #menu{ 
     width:40px; 
     padding:5px; 
    } 
    #menu li{ 
     padding: 10px 10px; 
    } 
    ... 
    /* ...a lot more style... $/ 
    } 

/* Same style when class buttonClicked */ 
    .buttonClicked #menu{ 
    width:40px; 
    padding:5px; 
    } 
    .buttonClicked #menu li{ 
    padding: 10px 10px; 
    } 
    ... 
    /* ...a lot more style... $/ 

Dies ist nur ein Licht Beispiel, aber der Stil i auf dem Menü anwenden ist viel komplexer als das, so würde ich den Code vermeiden möge duplizieren, wenn es möglich ist.

Hier ist ein JsFiddle: https://jsfiddle.net/rtnp67s2/3/

EDIT: Eigentlich, was ich suche, ist ein Code zu tun des Stils Refactoring. Ist es möglich ?

So etwas wie (natürlich nicht funktioniert):

/* Style when screen is less than 600px or when class .buttonClicked active */ 

    @media (max-width: 600px) OR .buttonClicked { 
    #menu{ 
     width:40px; 
     padding:5px; 
    } 
    #menu li{ 
     padding: 10px 10px; 
    } 
    /*... more than 100 lines of styling... */ 
    } 

Vielen Dank im Voraus!

Answer 1

Sie können das Menü über die Taste ein- und ausblenden:

$("#toggle-menu").click(function(){ 
    if($('#menu').is(':visible')){ 
     $("#menu").hide(); 
    }else{ 
     $("#menu").show(); 
    } 
}) 

Answer 2

Eine andere Möglichkeit ist es, die Medienabfrage Code zu löschen und jQuery Skript schreiben, das .menuMinimized Klassen auf click und resize Ereignisse dynamisch hinzufügt, oder unter Sollwert von $(window).width().

Dies könnte jedoch möglicherweise neue Probleme in der reaktionsschnellen Entwicklung aufwerfen. Wenn Sie bereits Bootstrap und jQuery hinzugefügt haben, wäre das Aufblähen von ~ 100 Zeilen doppelten Codes unbedeutend.