仅在移动设备中使用JavaScript功能

Question

我希望您只在移动设备的屏幕宽度为767像素时使用JavaScript功能。以下是我的代码：

这是我的代码

$('#my-btnn').click(function () {
    $('#mobile-login').hide();
    $('#user-settings').slideToggle('fast');
});

- Mohammad Kashif

---

你想隐藏 #my-btnn 还是希望点击它时不做任何操作？ - dfsq

我只想在移动设备的767像素上使用这个JavaScript函数，而在桌面站点上禁用这个JavaScript函数。 - Mohammad Kashif

Answer 1

你可以简单地检查窗口宽度来确定函数是否应该工作：

您可以通过检查窗口宽度来确定函数是否应该工作：

$('#my-btnn').click(function () {
    if ($(window).width() < 767) {
        $('#mobile-login').hide();
        $('#user-settings').slideToggle('fast');
    }
});

- dfsq

Answer 2

您可以通过检查分辨率来绑定您的点击事件。使用onResize并通过screen.width进行检查。

$(window).resize(function() {
    if (screen.width <= 767) {
         $('#my-btnn').bind('click', function () {
            $('#mobile-login').hide();
            $('#user-settings').slideToggle('fast');
         });
    }
});

你可以检查是否早已绑定。

或者你可以在 onReload 中添加这个检查。

- Anatoli

---

请注意，由于每次窗口.onresize事件（对于小尺寸）都会有新的绑定，因此它最终将在数十个单击事件处理程序中结束。 - dfsq

很棒...只是这段代码有一个小问题，我的切换按钮在单击后不能保持打开状态。 - Mohammad Kashif