jquery - jQuery Superfish 菜单悬停或切换取决于屏幕大小

Question

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

有没有办法根据屏幕大小更改 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，它会自动使用点击打开触摸设备上的子菜单，同时支持鼠标悬停和键盘导航。