Question

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

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

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

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

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

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

现在，如果浏览器的移动视图处于活动状态，并且用户已按下toggler以显示菜单，那么他再次按下它以隐藏它，#navigation将display:none作为内联样式，如果用户再次将浏览器重新调整回其正常视图（大于500px），则会发生的情况是媒体查询不会将内联display:none更改（覆盖）回{{1 }}

如何通过display:block更改内联样式的任何建议？

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;
    }
}

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

1 个答案: