Question

我有2个侧边栏（侧边栏和侧边栏移动）。第一个侧边栏我希望在屏幕宽度＆gt;时看到它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功能中存在问题，当我调整窗口大小时，它会显示side-bar-mobile。但我无法解决这个问题。帮我！谢谢。

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

Answer 2

还会调整窗口大小调整条件。试试这个

$(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查询时仍显示菜单

2 个答案: