使用媒体查询控制（覆盖）内联样式

Question

我在这里遇到了关于媒体查询和内联样式的不同问题，但没有一个涵盖我想要的。

我正在做一个小项目，我要做的就是将移动视图上的主菜单更改为collapse/expand

无论如何，我有这个简单的js来改变移动视图菜单的display

  $("#toggler").click(
        function () {
            if ($("#navigation").css("display") == "none") {
                $("#navigation").css("display", "block");
            }
            else {
                $("#navigation").css("display", "none");
            }
        }
        );

当移动视图css 媒体查询处于活动状态时，我有这个media query 来显示toggler btn，并隐藏菜单。然后用户可以按toggler btn 打开/显示菜单。

 @media screen and (max-width:500px) {
        #navigation {
            display: none;
            width: 100%;
            float: none;
        }  
        #toggler {
            display: block;
        }
    }

现在，如果浏览器激活了移动视图并且用户按下了toggler 来显示菜单然后他再次按下它来隐藏它，#navigation 将具有display:none 作为内联样式，那么如果用户再次将浏览器的大小调整回其正常视图（大于 500 像素），则会发生媒体查询不会更改（覆盖）内联 display:none 回到 display:block

对如何通过media queries 更改内联样式有任何建议吗？

Answer 1

您可以切换元素上的类，而不是更改内联样式。 JSBin

JS

$("#toggler").click(function () {
   $("#navigation").toggleClass('unhidden');
})

CSS

@media screen and (max-width:500px) {
    #navigation {
        display: none;
        width: 100%;
        float: none;
    }
    #navigation.unhidden {
        display:block;
    }  
    #toggler {
        display: block;
    }
}