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

Question

我有 2 个边栏（side-bar 和 side-bar-mobile）。第一个侧边栏我想在屏幕宽度 > 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 滑动效果不错。但是当我将 window 调整为正常大小（宽度 > 768px）时，侧边栏移动仍然显示。我现在能做什么？我认为 slidetoggle 函数有问题，当我调整 window 大小时，它会显示侧边栏移动。但我无法解决这个问题。帮我！谢谢。

Answer 1

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

因此，为了做到这一点，您需要像这样注册 window 调整大小侦听器：

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

Answer 2

同时设置window调整大小条件。试试这个

$(function(){
var nb = $('#toggle-menu');
var n = $('.side-bar');

$(window).on('resize', function(){
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >768) {
$('.side-bar').show().addClass('keep-nav-closed');
}
});

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

Menu Still Show When Change @media query

html

javascript

css

jquery

jquery-mobile