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设备上的子菜单中的链接不起作用

回答

相关问题