Question

我有一个使用悬停状态的标题菜单。在悬停时，li的颜色会发生变化，子ul会在下方打开。

为了在触控设备上进行此项工作，我还使用此脚本为这些元素添加了“悬停”类：

$(".isc-primary-nav li.has-children a.nav-link.hoverable").unbind().on("touchstart", function (e) {
    'use strict';
    var li = $(this).parent().parent();
    if (li.hasClass("hover")) {
        var href = $(this).attr("href");
        window.location = href;
        return true;
    } else {
        li.addClass("hover");
        // close all fourth-level menus
        $("ul.sub-2 li.active").each(function () {
            $(this).find("span").find(".fa-minus").click();
            $(this).removeClass("active");
        });
        $(".isc-primary-nav li.has-children").not($(li)).not($(li).parents()).removeClass("hover");
        e.preventDefault();
        // if we are in .sub-1
        if (li.parent().hasClass("sub-1")) {
            var ul = $(li).find("ul:first");
            var leftBox = $(li).parent();
            resizeBoxes(leftBox, ul);
        }
        return false;
    }
});

如果尚未点击该项目，我添加悬停类以重现悬停状态。然后，如果该项目已“悬停”，则单击该链接将正常工作。

当用户点击打开一个新菜单项时，其他菜单项应该关闭（就像在桌面上一样，如果将鼠标悬停在另一个项目上，则其他菜单关闭）。我这样做，删除除了当前菜单项（及其父项）之外的所有“hover”类：

$(".isc-primary-nav li.has-children").not($(li)).not($(li).parents()).removeClass("hover");

但是，在某些情况下，悬停状态仍然存在。当我打开第四级菜单时会发生这种情况，通过单击“加号”图标而不是悬停;我认为它发生在第四级的原因是因为通过点击加号图标，我专注于子菜单，并给它悬停状态。当我尝试打开另一个菜单项时，“hover”类被删除，但是当我检查元素时，我看到它们具有：悬停样式。

为什么：在我点击平板电脑的其他地方后，悬停仍然存在？如果我在屏幕上的其他地方点击，那么：悬停状态最终会消失，但是当我打开另一个菜单项时它需要消失，否则我最终会立即展开两个菜单并且看起来很糟糕。

Answer 1

我认为这是一个国家问题。据我所知，问题是平板电脑/ iPad保存了最后一页所处的状态（即手指触摸菜单），并且在下一页加载时仍处于该状态。

我认为您最好的选择是将菜单实施为可点击的菜单而不是悬停的菜单，如果您被允许这样做。

查看有关悬停菜单及其缺点的帖子here。

Answer 2

我提出了一个解决方案，以防止：触摸屏上的悬停状态。我添加了一个新类，＃34; no-hover＆＃34;，它从未在桌面上使用，但在我的touchstart事件期间应用。我通过添加＆＃34; no-hover＆＃34;更改了我在上面发布的touchstart功能。在任何地方，我删除＆＃34;悬停＆＃34;类：

li.addClass("hover").removeClass("no-hover");
$(".isc-primary-nav li.has-children").not($(li)).not($(li).parents()).removeClass("hover").addClass("no-hover");

然后在我的CSS中，我改变了所有的实例：hover to

:hover:not(.no-hover)

平板电脑悬停状态正在陷入困境

2 个答案: