Question

我试图制作侧边栏菜单以实现快速响应的设计。

我有一个容器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;    
    }
}

Answer 1

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

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

如果您的CSS中包含以下内容，则上述操作将起作用：

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

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

1 个答案: