按窗口大小隐藏和显示 div 元素

我有一些代码可以根据浏览器窗口的宽度隐藏div。它在浏览器窗口中效果很好。当我尝试在TwitteriOS应用程序中打开同一页面时，代码不再有效。这是代码。

$(function () {
    var isAdded = false;
    $(window).resize(function () {
        if ($(window).width() > 975) {
             isAdded = true;
             $('.sideBar').removeClass('hidden');
        } else if ($(window).width() < 975) {
            isAdded = false;
             $('.sideBar').addClass('hidden');
        }
    });
});

如果我在第二个条件中添加alert(screen.width);，则警报窗口不会显示在移动设备中。任何帮助不胜感激

更新我接受了狮身人面像的回应并尝试了这个。它有效，但似乎有点草率。大家怎么看？我对 js/jquery 有点绿

$(function () {
    var isAdded = false;
    $(window).load(function () {
        if ($(window).width() < 975) {
            isAdded = false;
            $('.sideBar').addClass('hidden');
        };
        $(window).resize(function () {
            if ($(window).width() > 975) {
                 isAdded = true;
                 $('.sideBar').removeClass('hidden');
            } else if ($(window).width() < 975) {
                isAdded = false;
                 $('.sideBar').addClass('hidden');
            }
        });
    });
});

您是否在<head>中使用meta？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

上级：尝试将包装函数替换为.ready()函数：

$(document).ready(function() {
    var isAdded = false;
    $(window).resize(function () {
        if ($(window).width() > 975) {
            isAdded = true;
            $('.sideBar').removeClass('hidden');
        } else if ($(window).width() < 975) {
            isAdded = false;
            $('.sideBar').addClass('hidden');
        }
    });
    $(window).resize(); // don't forget to trigger a code
});

一个相当干净的方法是将调整代码放在一个单独的函数中，然后让load和resize调用该函数：

$(function () {
    var win = $(window),
        side = $('.sideBar'),
        isAdded = false;
    function rearrange() {
        if (win.width() > 975) {
            isAdded = true;
            side.removeClass('hidden');
        } else {
            isAdded = false;
            side.addClass('hidden');
        }
    }
    win.load(rearrange);
    win.resize(rearrange);
});

相关内容

最新更新

热门标签：