在移动设备上处理带有悬停效果的“a”标签

Question

我无法想象任何人都能破解这个问题，但任何帮助或正确方向的观点都会很棒。

我有一个标准菜单，其中包含 x 个链接，悬停时这些链接将打开一个子菜单。然而，点击的主要链接是可访问的页面。

<ul id="mainNavigation">
    <li>
        <a href="/somewhere.html">Main 1</a>
        <ul class="submenu">
            <li><a href="/somewhere2.html">Sub 1</a></li>
            <li><a href="/somewhere3.html">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="/somewhere4.html">Main 2</a>
        <ul class="submenu">
            <li><a href="/somewhere5.html">Sub 1</a></li>
            <li><a href="/somewhere6.html">Sub 2</a></li>
        </ul>
    </li>
</ul>

在横向平板电脑上，桌面菜单显示，但显然悬停效果不起作用。这里真正的问题是我希望主链接单击以打开子菜单，然后再次单击主链接以转到它附加的 href（仅在设备上）。

基本上是桌面： 悬停打开子菜单上的主要链接 点击主链接会打开一个页面

平板电脑 主要链接在第一次点击时打开子菜单 主链接将在第二次点击时打开一个页面

我猜测可能是一些媒体查询以 ipad 为目标并制作自定义菜单，或者有人可以建议 jquery 替代方案。

谢谢

Answer 1

我按照你的要求为你写了一些东西......
但是要隐藏打开的子菜单...我不确定。

哈哈！您希望它如何返回隐藏状态？
我暂时设置了一个 setTimeout。

这是目前为止的代码：
CodePen

注意要在移动设备上尝试并使其无法在桌面上执行，请删除据说会反转逻辑的!。

$(document).ready(function(){

  // Easy way to determine if the script executes on mobile.
  var isMobile=false;
  $(document).on("touchstart",function(){
    isMobile=true;
  });

  // Main links handler
  $(".mainLink").on("click",function(e){
    if(!isMobile){                            // REVERSE THIS LOGIC TO TRY ON MOBILE
      e.preventDefault();

      if( $(this).siblings("ul").find("li").is(":visible") ){
        console.log("sub is visible, open link!");

        window.location.assign( $(this).attr("href") );
      }else{
        console.log("sub is NOT visible, show sub-menu.");
        $(this).siblings("ul").show();
        setTimeout(function(){
          $(".submenu").hide();
        },1500);  // 1,5 seconds to hide the sub-menu.
      }
    }
  });
  
  // Main links handler - Just to stop event propagation.
  $(".subLink").on("click",function(e){
    if(!isMobile){                            // REVERSE THIS LOGIC TO TRY ON MOBILE
      e.stopImmediatePropagation();
      console.log("SUB clicked, open link!");
    }
  });
});

#mainNavigation li ul{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="mainNavigation">
    <li>
        <a href="/somewhere.html" class="mainLink">Main 1</a>
        <ul class="submenu">
            <li><a href="/somewhere2.html" class="subLink">Sub 1</a></li>
            <li><a href="/somewhere3.html" class="subLink">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="/somewhere4.html" class="mainLink">Main 2</a>
        <ul class="submenu">
            <li><a href="/somewhere5.html" class="subLink">Sub 1</a></li>
            <li><a href="/somewhere6.html" class="subLink">Sub 2</a></li>
        </ul>
    </li>
</ul>