如何处理使用 :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>