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

Menu Still Show When Change @media query

本文关键字：显示 @media 查询 菜单      更新时间：2023-09-26

我有两个侧边栏（侧栏和侧栏移动）。第一个侧边栏我想在屏幕宽度>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();
})

侧栏移动是滑动良好。但当我将窗口大小调整为正常大小（宽度>768px）时，侧栏手机仍然显示。我现在能做什么？我认为滑动切换功能的问题是，当我调整窗口大小时，它会使侧栏移动。但是我不能解决这个问题。帮帮我！非常感谢。

当屏幕宽度>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"});
    }
}

还设置了窗口大小调整条件。试试这个

$(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');
}
});
相关文章：