Question

我正在开发一个响应式菜单，希望屏幕尺寸大于767px时悬停显示，并在屏幕尺寸小于767px时打开。

有没有办法根据屏幕尺寸更改eventType的默认设置？即是否存在可以某种方式插入代码的媒体查询？

我在Github上使用Karl Swedberg的Superfish版本：

https://gist.github.com/917446

Answer 1

检查屏幕尺寸：

var $width = $(window).width();

然后测试负载：

$(function(){
    var $width = $(window).width();

    if($width > 767){
        // do hover
    } else {
        // do toggle
    }
});

或者您可以将其粘贴在外部函数中，因为您需要在窗口调整大小时调用它：

function checkWidth($width){
    if($width > 767){
        // do hover
    } else {
        // do toggle
    }
}

$(function(){
    checkWidth($(window).width());
});

$(window).on('resize',function(){
    checkWidth($(this).width());
});

Answer 2

您可以使用条件语句来检查屏幕大小并相应地绑定事件。您可以使用.bind()。请参阅文档。

Answer 3

您可能想要考虑的另一个选项是使用Superfish v1.5.9，它会自动使用水龙头在触摸设备上打开子菜单，同时支持鼠标悬停和键盘导航。

jQuery Superfish菜单悬停或切换，具体取决于屏幕大小

3 个答案: