Jquery显示/隐藏根本不适用于移动设备

Posted 2023-05-07

【中文标题】Jquery显示/隐藏根本不适用于移动设备

【英文标题】：Jquery show/hide not at all working on mobile devices

【发布时间】：2016-01-09 16:20:14

【问题描述】：

这是我网站的链接。 Website 正如您在网站上看到的那样，我已将 jquery 应用于 LOCATIONS 菜单中的隐藏和显示菜单项。 它根本不适用于移动设备。默认情况下，列表项使用 CSS 隐藏。 我认为 event.preventDefault();无法正常工作，因为它正在重新加载页面。 这是我的

JS：

$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) 
    event.preventDefault();
    $(this).toggleClass('active');
    $('.dropdown-mega.level2').hide();
    if($(this).hasClass('active'))
        $(this).closest('.parent').find('.dropdown-mega.level2').show();
);

我认为 event.preventDefault();无法正常工作，因为它正在重新加载页面。

【问题讨论】：

你的js代码在哪个文件里？文件名？

@ShehrozAhmed Iam 使用 opencart，当文档就绪函数运行时，我已将代码添加到函数 init 中的 common.js 中

问题是当屏幕变小时你的事件没有绑定在“a”标签上，让我检查一下问题:)

@ShehrozAhmed 好的，请更新

@ShehrozAhmed 我在移动 url 中看到的是它转到 href="#" 这意味着 eventdefault 在移动设备上不起作用

【参考方案1】：

在event.preventDefault();之前也添加event.stopImmediatePropagation();

【讨论】：

我已经添加了它，但它仍然无法正常工作。我看到它用 href="#"

重新加载页面

【参考方案2】：

尝试在event.preventDefault(); 之后添加return false;

【讨论】：

我照你说的做了。它停止了一切，即我什至无法点击链接。我添加了返回错误；最后它又好了，但在移动端仍然失败

尝试在末尾添加 return false .. 或者代替 href="#" 添加 href="javascript:;"

添加 href="javascript:;"用这种语法？

是的.. 而不是 希望这会有所帮助

【参考方案3】：

我相信您必须使用一些插件才能使其在移动设备中运行。您可以尝试使用hammer.js 来实现这一点。这个插件提供了许多触摸事件。

http://hammerjs.github.io/

【讨论】：

我的简单问题是 event.preventDefault();不能在移动设备中工作。只是为了这个缘故，转向插件来实现它很奇怪。请帮助我了解我目前正在使用的内容。

只是一个建议：- 尝试使用 stopPropagation() 也阻止默认值。

【参考方案4】：

如果有人和我一样挣扎，可以成为浏览器缓存。尝试清理它（或在隐身窗口中测试）。

如果您同时开发该页面并在设备上进行测试，则可能会出现这种情况。出于某种原因，移动浏览器似乎不会在每次刷新时下载 javascript 文件。

希望对您有所帮助。