javascript - 当我在智能手机上显示页面时将其添加到我的页面

Question

当您将鼠标悬停在菜单上时，当我从您的计算机上使用您的页面时，我收到了一个选择语言的菜单。

在智能手机上使用手时我想做同样的事情。

我正在尝试使用这个 Hammer.js，但它不起作用。在我的代码下面。

$(document).ready(function(){
    var languageToChange = $('.lang-list a');
    var change = Hammer(languageToChange).on('tap', function(event){
        alert(event);
    });
});

Answer 1

您应该检测屏幕的宽度，如果它低于 780 像素而不是使用点击，否则使用悬停事件。Bootstrap可以帮助您制作响应式站点。如果您不想使用它，请尝试以下操作：

function desktopEvent( text ){
    alert( "Desktop:" + text );
}
function mobileEvent( event ){
    alert( "Mobile" + text );
}

$(document).ready(function(){

    var languageToChange = $('.lang-list a');
    var change;
    if ( $(document).width() < 780){
        change = Hammer(languageToChange).on('tap', mobileEvent( event ));
    } else {
        change = Hammer(languageToChange).on('mouseover', desktopEvent( event ));
    }
});