css/jquery中的移动(触摸)设备友好下拉菜单

Question

我一直在阅读有关此主题的许多主题,这是一个在移动设备上友好的下拉菜单.很多时候,最好在下拉菜单中进行非悬停操作.有一些解决方法,其中一个是下拉项的主要超链接应链接到主题标签.

这使得它可以在移动设备上运行,但对于普通的桌面用户来说,这会让人感到困惑.因此,解决方案是为桌面用户提供正常的下拉菜单,其中第一个超链接也链接到页面.对于移动用户,点击某个项目将打开下拉菜单,但第二次点击主项目将打开相应的页面.

我看过以下网站,不知怎的,他们的菜单的工作原理如下:http: //www.hgtv.com/ 你可以在平板电脑上查看这个并点击主菜单,再次点击该项目,你会知道我的意思.

但是,我如何找到或下载我自己网站的确切类似设置？

提前致谢

Answer 1

这就是我的工作:

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

jQuery(document).ready(function(){
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(isTouchDevice()) {
        // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
        jQuery("#menu-main-menu > li > a").click(function(event) {
            // Perform a reset - Remove the "clicked" class on all other menu items
            jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
            jQuery(this).toggleClass("clicked");
            if (jQuery(this).hasClass("clicked")) {
                event.preventDefault();
            }
        });
    }
});

我在我的WordPress网站上使用它.在桌面浏览器(非触摸浏览器)上,单击主菜单项时,它将直接进入链接的位置.当盘旋时,它将显示下拉列表.

对于移动(触摸浏览器),当触摸主菜单项时,它将扩展下拉列表,如果再次单击它将转到新位置.我还添加了一个"重置"代码行以使该部分工作:如果您触摸第一个主菜单项(展开下拉列表),然后触摸第二个主菜单项(展开第二个下拉菜单),然后触摸第一个主菜单再次项目,它将仍然表现为下拉列表,直到再次点击.没有这条线,它将直接进入新的位置.

Answer 2

您将必须处理多个事件才能在移动和桌面浏览器中获得该功能。

如果您查看该示例菜单，您可以将鼠标悬停以展开，而在移动设备上，您需要单击/触摸来展开。

我尝试实现此目的的一种方法是为桌面使用“悬停”侦听器，但为移动设备使用“触摸”事件侦听器。

为此，您必须向 jQuery 添加自定义事件，例如“touch”。请参阅下面的帖子了解执行此操作的方法：

如何在 iPad 版 Safari 中使用 jQuery 识别触摸事件？是否可以？