jQuery preventDefault 根据移动设备上的 :hover 状态

Question

请帮我弄清楚如何处理这种情况。我们有一个链接。该链接有 :hover css 规则，可扩展额外的链接块。

$('li').children('a').on('click', function(e) {
	
  if ( $(this).siblings('div').is(':hidden') ) {
  
  	e.preventDefault();
    
  }
  
});

ul {
  list-style-type: none;
  border: 1px solid black;
  background-color: white;
}

a {
  display: block;
  height: 30px;
  line-height: 30px;
}

li:hover div {
  display: block;
}

li div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="google.com">Google</a>
    <div>
      <a href="gmail.com">GMail</a>
      <a href="maps.google.com">Maps</a>
    </div>
  </li>
</ul>

想法：需要防止第一个链接的默认值，直到其他链接扩展。在桌面上您不会发现差异（如果您仅删除 :hover CSS 规则，并尝试单击第一个链接，它将无法工作，因为其余链接被隐藏）。正确的行为：用户悬停第一个链接，看到其他链接，然后他能够点击第一个链接。

问题开始于手机，因为悬停和点击是相同的。当用户点击第一个链接时，它会执行 href，即使在点击的那一刻附加链接是隐藏的。但是由于 :hover 规则在单击链接的同时适用，JS 将其视为链接已打开并且不会阻止默认设置。意味着我当前的 IF 语句在实际点击前一秒在移动设备上为 FALSE。请帮助我找到正确的方法。

热烈欢迎不使用 jquery-mobile 的解决方案！谢谢！

Answer 1

这是一个可能的解决方案：始终运行preventDefault。并根据 div 的可见性，决定是显示链接还是转到 href。

$('li').children('a').on('click', function(e) {
	
  e.preventDefault();
  var $links = $(this).siblings('div');
  
  if ($links.is(':hidden')) {
    $links.show();
  } else {
    window.location.href = this.href;
  }
   
});

ul {
  list-style-type: none;
  border: 1px solid black;
  background-color: white;
}

a {
  display: block;
  height: 30px;
  line-height: 30px;
}

li:hover div {
  display: block;
}

li div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="google.com">Google</a>
    <div>
      <a href="gmail.com">GMail</a>
      <a href="maps.google.com">Maps</a>
    </div>
  </li>
</ul>

PS：对我来说，这更有可能是用户体验问题。在触摸设备上，我们真的没有hover 事件。因此很难提供与桌面相同的体验。通常在移动设备上会有稍微不同的设计，比如在这种情况下，下拉菜单会切换tap 或touchstart 事件。