在不同的屏幕尺寸上清除切换（）

Question

我有一个链接，我想在点击时显示更多内容，但仅限于移动屏幕上。我正在使用调整大小和加载功能来确定屏幕大小，但是当我将大小调整为小屏幕然后再调整为大屏幕并单击它仍然切换的链接时，它就像这个取消绑定不能完全工作，或者有时它也会影响链接在小屏幕上，它们完全停止工作：

在这里摆弄：调整屏幕大小以进行测试： http://jsfiddle.net/mp429cp5/1/

$(window).on("load resize", function() {    
if ($(window).width() < 960) {
        $('ul').hide();         
            $('a').bind( "click", function() {
                $('ul').toggle();
                $('ul').toggleClass('collapsed');
                return false;
            });
} else if ($(window).width() > 960) {
        $('a').click(function(){
            $('ul').unbind('click').toggle();
        });             
     }              
});

Answer 1

您可以将 if 屏幕大小放在点击处理程序中，因此如果屏幕大于 960，则执行。这样您就可以避免您尝试执行的取消绑定，并且此代码不会在您每次调整大小时运行。

对于ul 隐藏/显示，这可以通过媒体查询在 CSS 中完成

http://jsfiddle.net/mp429cp5/5/

当宽度 > 960 时，您可能还想为 ul 做一个 .show()

$(document).ready(function () {
    $(window).on("resize", function () {
        if ($(window).width() < 960) {
            $('ul').hide();
        } else {
            $('ul').show();
        }
    });

    $('a').bind("click", function () {
        if ($(window).width() < 960) {
            $('ul').toggle();
            $('ul').toggleClass('collapsed');
        }
        return false;
    });
});

$(window).on("load", function () {
    if ($(window).width() < 960) {
        $('ul').hide();
    } else {
        $('ul').show();
    }
});

您实际上应该将调整大小和加载的当前内容放入一个函数中，然后调用它。我只是复制它来告诉你我的意思

Answer 2

使用window.screen.availHeight 和window.screen.availWidth 确定屏幕尺寸。

您可能还希望测试特定于触摸设备的事件（例如window.ontouch）。