Question

我有一个导航菜单。在桌面和iPad和iPhone上它工作正常。仅在Android设备上（使用Chrome）它不起作用。子菜单打开，但如果要在子菜单中打开链接，子菜单将关闭。所以你不要去页面。我在互联网上搜索了很多并尝试过，但到目前为止还没有成功......在简化代码之下。希望有人可以帮助我。

<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; }

Answer 1

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>

Android设备上子菜单中的链接不起作用

1 个答案: