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

看一下以下菜单：

.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()。检查之前是否检测到鼠标移动，如果是，请单击链接。如果不需要第二次单击。

问题：要求两次单击可能不是用户友好的操作（许多操作无法识别该链接是可单击的）。

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

最佳答案

我认为一种好的做法是使可见的可点击元素。您不仅应该考虑实现，还应该考虑用户将如何交互。用户需要知道有一个子菜单，为此您可以添加一个小图标，即使我们可以: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>