Question

我有一个仅限CSS的下拉菜单，可以在桌面上按预期运行。在iPad上的移动Safari上，当点击其中一个顶级导航链接时，其下拉菜单会短暂显示，但会跟踪链接，将用户带到新页面。

我一直在阅读有关此内容的所有内容，似乎默认行为应该是iPad会将第一次点击视为悬停，而实际上并没有按照链接直到第二次点击。这是因为:hover样式会更改其子菜单的display属性，因此设备知道不会在第一次点击时关注该链接。

我已经看到此行为在其他网站上正常运行，甚至看到它在我网站的其他部分正常工作，但由于某种原因，它在我的CSS下拉菜单中表现不正确。

我的网站https://www.storeyourboard.com上可以看到该菜单。有一个水平菜单列出页面顶部附近的类别名称。如果您在iPad上查看，并点击其中一个菜单项，例如＆＃34; Surfboard＆＃34;，您将看到iPad导航到Surfboard页面，而不是在第一次点击时显示下拉菜单。奇怪的是，有时候我的敲击随机行为与预期一致，下拉菜单显示没有导航，但这种情况很少见，我无法一致地重现它。

这是菜单的相关标记：

HTML

<ul class="mainNav-menu">
    <li>
        <a href="/sup-racks-bags/">SUP</a>
        <div class="mainNav-submenu">
            <ul class="mainNav-submenu-menu">
                <!-- Submenu items here -->
            </ul>
        </div>
    </li>
    <li>
        <a href="/surfboard-racks-bags/">Surfboard</a>
        <div class="mainNav-submenu">
            <ul class="mainNav-submenu-menu">
                <!-- Submenu items here -->
            </ul>
        </div>
    </li>
</ul>

CSS

.mainNav-submenu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    background-color: #8a8a8a;
    z-index: 20;
    padding: 1rem;
}

.mainNav-menu > li:hover .mainNav-submenu {
    display: block;
}

我已经看到其他一些帖子说将onclick="return true"添加到菜单链接或菜单容器中会修复它，但这对我没有任何影响。我还要提一下，我在网站上使用fastclick.js。我认为这可能导致问题，但当我删除它时，我看到完全相同的行为。

我还将this article中的代码添加到我的网站，只是为了查看它是否会正常运行，而且确实如此。换句话说，我将这小段代码添加到我的网站：

<style>
    p {height: 100px;}

    p span {
        display: none;
    }

    p:hover span {
        display: block;
    }
</style>

<p>
    <a href="/">Tap me</a>
    <span>You tapped!</span>
</p>

这可以正常工作（即使快速点击活动）。如果我点击链接，那么你就点击了＃34;跨度显示，如果我再次敲击，我就会离开。

我无法弄清楚为什么同样的行为无法正常导航菜单。这是我标记或样式的方式吗？有谁有想法吗？我不确定还能做什么。

更新

感谢Doc的回答，我能够提出这个解决方案：

.mainNav-menu > li > a {
  pointer-events: none;
}

.mainNav-menu > li:hover > a {
  pointer-events: all;
}

它现在在网站上存在，你可以看到它在行动。我仍然不知道为什么这是必要的以及为什么它本来没有用，所以如果有任何想法，请告诉我。

Answer 1

我不知道为什么点击a链接会导致它被跟踪，但这仍然可以解决问题。

首先，使其成为所有这些标签以及链接上的常规文本。所以保持

<a href="/surfboard-racks-bags/">Surfboard</a>

还要添加

<p>Surfboard</p>

确保这两个元素具有相同的内容和样式

然后，默认情况下使链接具有display: none，因此隐藏链接。但是，当div悬停时，请使链接可见（使用类似display: inline的内容）并提供其他非链接display: none。理想情况下，p元素应该被a元素无缝替换，a元素的样式应该完全相同，就像:hover一直存在

一样

对于桌面，当用户没有悬停div时，没有理由要求链接的“链接”部分处于活动状态，因此它将替换为常规文本。当用户悬停div时，链接显示，因此他/她可以使用它。

然而，当iOS用户点击div时，他/她应该触发transition: display 0s 0.1s效果，但不链接;由于链接在他/她点击时不可见，因此不应触发。如果用户仍在点击该链接，请向a和p元素添加"${PODS_ROOT}/Headers/Public/Braintree"之类的内容，因为该链接可能显示得太快

此方法的唯一问题是，一旦iOS用户打开下拉菜单，他/她就无法再次点击它关闭它;这将触发链接。但是用户可以点击其他地方，它应该关闭

CSS下拉菜单在iPad上无法正常运行

1 个答案: