如何处理使用 :hover 和 :focus 作为可点击顶级链接的触摸屏设备上的多级菜单？

Question

看看下面的菜单：

 .clearfix::after { content: ""; clear: both; display: table; } #my-menu-inner > ul { margin:10px; width:100%; background-color:yellow; list-style-type:none; position:relative; } #my-menu-inner > ul > li { float:left; margin:20px; } #my-menu-inner > ul > li > a { padding:20px; border:1px solid black; display:block; } #my-menu-inner > ul > li > div.sub { position:absolute; top:calc(100% - 20px); background-color:red; padding:40px; display:none; left:0; width:100vw; } #my-menu-inner > ul > li a:hover + div.sub, #my-menu-inner > ul > li a:focus + div.sub, #my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus { display:block; }

 <div id="whatever">Just something before ...</div> <div id="my-menu"> <div id="my-menu-inner"> <ul class="clearfix"> <li> <a href="http://www.example.com/foo/">foo</a> <div class="sub"> <ul> <li><a href="http://www.example.com/mobile/">mobile</a></li> <li><a href="http://www.example.com/users/">users</a></li> </ul> </div> </li> <li> <a href="http://www.example.com/bar/">bar</a> <div class="sub"> <ul> <li><a href="http://www.example.com/never/">never</a></li> <li><a href="http://www.example.com/see-me/">see me</a></li> </ul> </div> </li> </ul> </div> </div>

对于拥有鼠标或触摸板的每个人来说，这是一个很好的工作菜单。 但是：移动设备的用户永远不会看到子菜单，因为他们只要单击其中一个链接就会立即转到href位置。 而且他们没有悬停状态，ofc。

我的想法：

想法 1 ：为触摸设备提供单独的移动菜单。 这很棒，因为无论如何大多数设计都有单独的移动菜单。

问题： @media screen (max-width: 1000px)将不足以检测用户是否能够悬停/聚焦，因为例如每个拥有大触摸屏的人都会被排除在外。

想法 2：在单击链接时preventDefault() 。 检查之前是否检测到鼠标移动，如果是，请点击链接。 如果不需要第二次点击。

问题：需要两次点击可能对用户不友好（许多人不会认识到链接是可点击的）。

处理这种情况的好方法和推荐方法是什么？

Answer 1

我认为一个好的做法是制作一个可见的可点击元素。 您不仅应该考虑实现，还应该考虑用户将如何交互。 用户需要知道有一个子菜单，为此您可以添加一个小图标，即使我们可以:hover也可能会出现在任何地方。

这是一个默认情况下悬停工作的简化示例。 如果我们无法悬停，我们可以单击图标以显示菜单。 只需使用一个图标，使用户点击直观。

 $('li span').click(function() { $(this).next('.sub').toggleClass('show'); $(this).toggleClass('open'); })

 .clearfix::after { content: ""; clear: both; display: table; } #my-menu-inner > ul { margin:10px; width:100%; background-color:yellow; list-style-type:none; position:relative; } #my-menu-inner > ul > li { float:left; margin:20px; } #my-menu-inner > ul > li > a { padding:20px; border:1px solid black; display:inline-block; } #my-menu-inner > ul > li > span { text-decoration:none; display:inline-block; padding:20px 5px; border:1px solid black; margin-right:-10px; cursor:pointer; } #my-menu-inner > ul > li > span:before { content:"▼" } #my-menu-inner > ul > li > span.open:before { content:"▲" } #my-menu-inner > ul > li > div.sub { position:absolute; top:calc(100% - 20px); background-color:red; padding:40px; display:none; left:0; width:100vw; } #my-menu-inner > ul > li a:hover ~ div.sub, #my-menu-inner > ul > li span:hover ~ div.sub, #my-menu-inner > ul > li a:focus ~ div.sub, #my-menu-inner > ul > li span:focus ~ div.sub, #my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus, #my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub.show{ display:block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="whatever">Just something before ...</div> <div id="my-menu"> <div id="my-menu-inner"> <ul class="clearfix"> <li> <a href="http://www.example.com/foo/">foo</a><span></span> <div class="sub"> <ul> <li><a href="http://www.example.com/mobile/">mobile</a></li> <li><a href="http://www.example.com/users/">users</a></li> </ul> </div> </li> <li> <a href="http://www.example.com/bar/">bar</a><span></span> <div class="sub"> <ul> <li><a href="http://www.example.com/never/">never</a></li> <li><a href="http://www.example.com/see-me/">see me</a></li> </ul> </div> </li> <li> <a href="http://www.example.com/bar/">I don't have submenu</a> </li> </ul> </div> </div>