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屏幕尺寸放在click处理程序中，这样如果屏幕大于960，则执行。这样就可以避免您尝试执行的解绑，并且每次调整大小时都不会运行此代码。

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

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

你也可以在宽度＆gt;时为ul做一个.show（） 960

$(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）。

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

2 个答案: