javascript - 在移动设备上处理具有悬停效果的 '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>