Android設備上的子菜單中的鏈接不起作用

我有一個導航菜單。在桌面上，在iPad和iPhone上，它工作正常。只有在Android設備上（使用chrome）它不起作用。子菜單打開，但如果要在子菜單中打開鏈接，子菜單將關閉。所以你不去頁面。我在互聯網上搜索了很多東西，並嘗試過，但目前還不成功......在簡化代碼下面。希望有人能幫助我。Android設備上的子菜單中的鏈接不起作用

<nav id="nav"> 

<ul> 

    <li>Main 1</a> 
    <ul> 
     <li><a href="http://www.stackoverflow.com">Submenu 1</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 2</a></li> 
    </ul> 
    </li> 

    <li>Main 2 
    <ul> 
     <li><a href="http://www.stackoverflow.com">Submenu 1</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 2</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 3</a></li> 
    </ul> 
    </li> 

    <li>Main 3 
    <ul> 
     <li><a href="http://www.stackoverflow.com">Submenu 1</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 2</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 3</a></li> 
    </ul> 
    </li> 
    </ul> 
</nav> 

nav ul li ul { 
display: none; } 
nav ul li:hover > ul { 
display: block; }

來源

2013-05-17 Marianne

Android讓我頭疼......經過數小時的搜索和努力，我放棄了。我認爲不可能讓所有設備的懸停效果運作良好。我選擇了以下解決方案：

我使用jQuery在單擊父級時顯示子菜單。如果再次點擊父項，相應的子菜單將消失。最多隻能打開一個子菜單。
對於禁用javascript的訪問者，我使用'傳統'css懸停效果。

以下是我的代碼。這是我第一次使用jQuery，所以如果有更高效或更好的解決方案，請告訴我！

<nav> 
    <ul> 
     <li class="nietactief nonJSclass">Hoofdmenu 1 
     <ul> 
     <li><a href="http://www.stackoverflow.com">Submenu 1a</a></li> 
     <li><a href="http://www.stackoverflow.com">Submenu 1b</a></li></ul></li> 
     <li class="nietactief nonJSclass">Hoofdmenu 2 
     <ul> 
      <li><a href="http://www.stackoverflow.com">Submenu 2a</a></li> 
      <li><a href="http://www.stackoverflow.com">Submenu 2b</a></li> 
      <li><a href="http://www.stackoverflow.com">Submenu 2c</a></li> 
     </ul> 
     </li> 
     <li class="nietactief nonJSclass">Hoofdmenu 3 
     <ul> 
      <li><a href="http://www.stackoverflow.com">Hoofdmenu 3a</a></li> 
      <li><a href="http://www.stackoverflow.com">Hoofdmenu 3b</a></li> 
      <li><a href="http://www.stackoverflow.com">Hoofdmenu 3c</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav>

nav ul li.nietactief ul { 
    display: none; 
} 
nav ul li.actief > ul { 
    display: block; 
} 
nav ul li.nonJSclass:hover > ul { 
    display: block; 
}

$(document).ready(function() { 

    $(".nonJSclass").each(function() 
    { 
    $(this).removeClass("nonJSclass"); 
    }); 

$('nav ul li').click(function() { 

    var classActief = $(this).attr('class'); 

if (classActief == 'actief'){ 

    $(this).removeClass('actief').addClass('nietactief'); 
} 

if (classActief == 'nietactief'){ 

    $('nav ul li').removeClass('actief').addClass('nietactief'); 

} 

if (classActief == 'nietactief'){ 

    $(this).removeClass('nietactief').addClass('actief'); 

} 


}); 



}); 



</script>

來源

2013-05-19 19:56:15 Marianne

Android設備上的子菜單中的鏈接不起作用

回答

相關問題