使用 jquery 设置 css 后 CSS 媒体查询停止工作答案

【问题标题】：CSS media queries stopped working after setting css with jquery使用 jquery 设置 css 后 CSS 媒体查询停止工作
【发布时间】：2014-08-02 22:09:20
【问题描述】：

我正在尝试制作侧边栏菜单以实现响应式设计。

我有一个容器 div #wrapper 用于页面和一个侧边栏 div 用于菜单 #sidebar-wrapper。

在桌面视图中，screen width > 768px 两个包装都显示，而browser's width <= 768px 侧边栏消失。

它与 CSS 媒体查询一起工作，但在我添加一个 jquery 函数以通过按钮切换显示/隐藏侧边栏后，CSS 媒体查询在第一次点击后停止工作。

为什么会发生这种情况，以及如何让它们都工作？

JQUERY

var wrapper = $("#wrapper");
var sidebar = $("#sidebar-wrapper");

$("#btn-toggle").click(function(e) {
    e.preventDefault();
    collapse();
});

function collapse(){
    if(sidebar.css("left") == "0px")
    {
        sidebar.css("left","220px");
        wrapper.css("margin-left","220px");
    }
    else
    {
        sidebar.css("left","0px");
        wrapper.css("margin-left","0px");
    }
}

CSS （我在这里使用 LESS）

#wrapper{ 
   .
   .
   margin-left: 220px;  /* for left sidebar */
   @media only screen and (max-width : 768px){
      margin-left: 0;
   }
}
#sidebar-wrapper {
    .
    .
    left: 220px;
    @media only screen and (max-width : 768px){  
        left: 0;    
    }
}

【问题讨论】：

标签： jquery css media-queries

【解决方案1】：

当您使用 jQuery 的 css() 方法时，它会设置 DOM 元素的 style 属性，该属性比样式表更具体（具有更高的优先级）。您可能希望创建具有预定义样式的类并在给定元素上切换这些类。例如：

function collapse() {
    sidebar.toggleClass('collapsed');
    wrapper.toggleClass('collapsed');
}

如果您的 CSS 中有以下内容，上述内容将起作用：

#wrapper.collapsed {
    margin-left: 0;
}
#sidebar-wrapper.collapsed {
    left: 0;
}

【讨论】：