html - 你能帮我让我的菜单在手机上工作吗？

Question

我已经成功地把一个漂亮的菜单放在一起了!`

<li class="huvudmenu"><a href="index.html">Framsida</a></li>
    <li class="huvudmenu">
    <a>Om oss</a>
    <ul>
      <li><a href="styrelsen.html">Styrelsen</a></li>
      <li><a href="historik.html">Historik</a></li>
      <li><a href="Stadgar.html">Stadgar</a></li>
      <li><a href="topeliuspriset.html">Topeliuspriset</a></li>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
      </ul>
      </li>
    </ul>
    </li>
    <li class="huvudmenu"><a href="verksamhet.html">Verksamhet</a>
      <ul>
        <li><a href="#">Hangö seminariet</a></li>
        <li><a href="arsberattelser.html">Årsberättelser</a></li>

      </ul>
    </li>
    <li class="huvudmenu"><a href="estholmen.html">Estholmen</a></li>
    <li class="huvudmenu"><a href="blimedlem.html">Bli medlem</a></li>

` http://jsfiddle.net/hx6uvc19/不幸的是，我的设置在触摸屏设备上效果不佳。有什么办法可以在保持设计的同时使其与触摸屏兼容？

谢谢!

Answer 1

您不能在移动设备上使用:hover 伪类。为了获得这种效果，您可以使用评论中@jbutler483 所述的 JQuery。

如果你想这样做，你可以通过添加一个 .active 类到主要的 li 来实现(通过使用类 .huvudmenu) 在 click/touchstart 上并将其添加到您也有悬停样式的 css 中。

这是 JQuery:

$('.huvudmenu').on('click touchstart', function(e){
    e.preventDefault();
    $(this).toggleClass('active').siblings().removeClass('active');
});

要添加的样式是:

nav ul li.active > ul {
    display: block;
}

和

nav ul li.active:after {
    width: 100%;
    background: #404040;
}

这将允许点击和触摸启动事件的样式。如果您希望它仅在移动设备上运行，您可以删除点击并使用 touchstart 事件和/或在初始化 JQuery 函数之前进行某种检测以确认这是移动设备。

这是对您的 fiddle 的更新:http://jsfiddle.net/lee_gladding/hx6uvc19/3/