單擊應用媒體查詢特定樣式

我在左側有一個菜單。當屏幕太小時，菜單佔用太多空間，所以我「儘量減少」它。爲此，當屏幕寬度小於像素中的特定尺寸時，我應用了不同的樣式。（與媒體查詢）。

但是我想允許用戶使用一個按鈕最小化菜單，即使在大屏幕上。這意味着應用與我的媒體查詢中相同的樣式。

我知道我可以添加一個類到容器上點擊按鈕，並從這個類的媒體查詢中複製/粘貼代碼，但我想可能有更好的方法來做到這一點，而不是重複代碼。

現在：

/* 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... $/

這只是輕的例子，但我申請菜單上的風格比這複雜得多，所以我想，以避免重複的代碼，如果有可能。

這裏有一個的jsfiddle：https://jsfiddle.net/rtnp67s2/3/

編輯：其實我正在尋找的是做一個代碼重構風格的。可能嗎？

喜歡的東西（顯然不工作）：

/* 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... */ 
    }

提前感謝！

來源

2016-06-10 Mathieu Schaeffer

如果您不想添加CSS類，請嘗試jQuery/javascript。例如，添加一個'增加'按鈕來增加大小，'減少'來減小菜單的大小。增加點擊... $（'＃menu'）。css（{width：'100px'，height：'30px'}）;減少點擊... $（'＃menu'）。css（{width：'90px'，height：'20px'}）; – Rahi

我不介意添加一個CSS類，這只是我想將點擊媒體查詢中描述的最小化樣式應用於點擊而不必重複它，因爲此自定義樣式超過100行代碼。看我的編輯。 –

您可以顯示並通過按鈕隱藏菜單：

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

來源

2016-06-10 12:28:11

另一種方法是刪除媒體查詢代碼，並寫jQuery腳本動態地將上click和resize事件.menuMinimized班，或在設定值$(window).width()。

但是，這可能會引發響應式開發中的新問題。如果你已經添加了Bootstrap和jQuery，那麼~100行重複代碼的膨脹是無足輕重的。

來源

2016-06-10 12:54:00

是的，我想避免使用JS。所以你不認爲有一種方法來重構代碼？（見我的編輯） –

據我所知，類似'@media（max-width：600px）或.buttonClicked {'是不可能的。 –

單擊應用媒體查詢特定樣式

回答

相關問題