在moble設備上使用懸停效果處理'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> 

在橫向平板電腦桌面菜單上顯示，但顯然懸停效果不起作用。這裏真正的問題是，我希望Main鏈接有一個點擊來打開子菜單，然後再點擊Main以轉到它所附帶的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>