1

我有一个导航菜单。在台式机和 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; }
4

1 回答 1

0

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-19T19:56:15.963 回答