【问题标题】:JQuery issue hover on desktop, click on mobile & tabletJQuery问题悬停在桌面上,点击手机和平板电脑
【发布时间】:2018-11-21 01:57:07
【问题描述】:

我在我的一个项目中使用以下 JQuery 来使顶级菜单链接单击一次以打开子菜单,然后再次单击相同的顶级链接以转到其 URL。该代码在移动设备和平板电脑中运行良好,但现在它影响了桌面菜单悬停在顶级链接上。我希望此代码仅适用于 768 像素以下的移动设备和平板设备。任何帮助表示赞赏。谢谢。

$(document).ready(function () {
$(‘#nav li').children('ul').hide();
$(‘#navl li a').click(function (event) { 
    var ts=$(this);
 var len=$(ts).parent('li').has('ul').length;
   if(len>0)
   {
       if($(ts).hasClass('clicked'))
       {

       }
       else
       {
           $(ts).parent('li').find('ul').first().slideDown();
           $(ts).addClass('clicked');
           return false;
       }
   }
})

});

【问题讨论】:

    标签: jquery mobile hover click desktop


    【解决方案1】:

    我认为您可以使用 jQuery 来检查网页在显示时的分辨率:

    $(window).resize(function () {
        if ($(window).width() < 768) {
            //Do something or in this case, put the code that needs to run under this situation
        }
    });
    

    这将在每次更改时检查网页/浏览器的分辨率。

    我还注意到,在你的代码中,你有这个:$(‘#nav li'). 如果我的视力很好,只有一个',你必须像这样改变它:$('#nav li'). 在下面的行中,你有同样的事情。

    希望它能帮助您或指导您找到其他解决方案!

    【讨论】:

    • 那么,我只需将现有代码放在 if 语句花括号中,它应该可以工作吗?感谢您的帮助。
    • 我刚刚使用了代码,在桌面视图上我的子菜单仍然没有出现在悬停状态。
    • 奇怪,顺便说一句,我注意到在你的代码中,你有一些错误,我会更新我上面的答案给你看。
    • 感谢您的帮助。
    猜你喜欢
    • 2012-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-30
    • 1970-01-01
    相关资源
    最近更新 更多