Question

这是我的问题：

我左边有一个菜单。当屏幕太小时，菜单占用太多空间，所以我最小化了＃34;它。为此，当屏幕宽度小于像素中的特定大小时，我应用不同的样式。（使用媒体查询）。

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

我知道我可以通过点击按钮向容器添加一个类，并从该类的媒体查询中复制/粘贴代码，但我想这可能是一个更好的方法来做到这一点。复制代码。

目前：

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

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

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

Answer 2

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

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

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

2 个答案: