javascript - 更改时菜单仍显示@media 查询

Question

我有 2 个侧边栏(侧边栏和移动侧边栏)。第一个侧边栏我想在屏幕宽度 > 768px 时看到它，所以我这样做了。

@media only screen and (min-width: 768px){
       .side-bar{
            display: block;
       }
       .side-bar-mobile{
            display: none;
       }
}

当屏幕宽度 < 768px 时，侧边栏隐藏，侧边栏移动显示切换，当我单击一个按钮时。
CSS

@media only screen and (max-width: 768px){
       .side-bar{
            display: none;
       }
       .side-bar-mobile{
            display: none;
       }
}

JS

$('#toggle-menu').on('click', function(e){
        $('.side-bar-mobile').slideToggle();
        e.preventDefault();
})

Side-bar-mobile 滑动效果不错。但是当我将窗口调整为正常大小(宽度> 768px)时，侧边栏移动仍然显示。我现在能做什么？我认为 slidetoggle 功能存在问题，当我调整窗口大小时，它会显示侧边栏移动。但我无法解决这个问题。帮我!谢谢。

Answer 1

当屏幕宽度 > 768 时，移动侧边栏无论如何都必须隐藏。

因此，为了做到这一点，您需要像这样注册窗口调整大小监听器:

window.onresize = function(){
   var h = window.innerHeight 
           || document.documentElement.clientHeight 
           || document.getElementsByTagName('body')[0].clientHeight;
    var w = window.innerWidth 
            || document.documentElement.clientWidth 
            || document.getElementsByTagName('body')[0].clientWidth;

    if(w > 768 ){
        $('.side-bar-mobile').css({display:"none"});
    }
}