菜單和子菜單的iPad問題

Question

我的桌面網站有菜單和子菜單。子菜單出現在菜單懸停上。菜單上有空白標籤的菜單僅作爲具有各自鏈接頁面的子菜單。它在桌面上工作正常。

當在iPad中訪問相同時，單擊菜單顯示子菜單，但是同一頁面從第一個子菜單重定向到href鏈接。我們只想打開子菜單而不是頁面重定向。

我們無法從菜單中刪除空白標籤，因爲它停止在iPad中顯示子菜單。

有什麼建議嗎？

Answer 1

假設你的菜單如下所示：

<ul> 
    <li> 
    <a href="/">Menu Level 1</a> 
    <ul> 
     <li> 
     <a href="/">Menu Level 2</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

嘗試類似的東西在你的jQuery的「文件準備好」的代碼如下：

if ('ontouchstart' in window || 'ontouch' in window) { 
    $('ul > li > a').on('touchstart',function(e){ 
    if (!$(this).parent().hasClass('touchOpen')) { 
     $('li.touchOpen').removeClass('touchOpen'); 
     $(this).parent().addClass('touchOpen'); 
     return false; 
    } 
    }); 
} 

它將事件綁定時從鏈接觸摸頂部菜單，檢查鏈接的父級LI是否具有指定的類。如果它確實有課程，則不會發生任何事情（即用戶將繼續到新頁面）。如果它沒有這個類，那麼這個類將被添加，並且該鏈接不會被跟隨。

然後你只需要添加「touchOpen」類以及你的：hover css;

li:focus ul, 
li:hover ul, 
li:active ul, 
.touchOpen ul{ 
/* css code to display the sub menu */ 
}