在不同的屏幕尺寸上清除 toggle()

Question

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

fiddle 此处：调整屏幕大小以进行测试： 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 hiding/showing，这可以在 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();
    }
});

你其实应该把resize and load的当前内容做成一个函数调用就行了。我只是复制它来告诉你我的意思

Answer 2

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

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

在不同的屏幕尺寸上清除 toggle()

Clear toggle() on different screen size

jquery

toggle

responsive-design