单击时应用媒体查询特定样式

Question

这是我的问题：

我在左侧有一个菜单。当屏幕太小时，菜单占用太多空间，所以我“最小化”它。 为此，当屏幕宽度小于特定像素大小时，我会应用不同的样式。 （带有媒体查询）。

但我想允许用户使用按钮最小化菜单，即使在大屏幕上也是如此。这意味着应用与我的媒体查询相同的样式。

我知道我可以通过单击按钮向容器中添加一个类，然后从该类的媒体查询中复制/粘贴代码，但我想可能有比复制代码更好的方法。

现在：

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

提前致谢！

Answer 1

您可以通过按钮显示和隐藏菜单：

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

Answer 2

另一种方法是删除媒体查询代码，编写jQuery脚本，在click和resize事件或$(window).width()的设置值下动态添加.menuMinimized类。

但是，这可能会在响应式开发中引发新问题。如果您已经添加了 Bootstrap 和 jQuery，那么大约 100 行重复代码的膨胀将是微不足道的。