css - 智能手机上的 HTML 菜单行为

Question

目前正在尝试使网站响应智能手机和平板电脑。我在网站的菜单上遇到了一些麻烦。菜单基本上是一个像这样的无序列表:

<ul class="navigation">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
    <li>
        <a href="page3.html">Page3</a>
        <!-- Dropdown menu -->
        <ul class="subnav">
            <li><a href="page4.html">Page4</a></li>
        </ul>
    </li>      
</ul>

内部无序列表是一个下拉菜单，当用户将鼠标悬停在 page3.html 链接上时出现。

在手机和平​​板电脑上，我希望菜单像 Accordion 一样，所以当用户触摸 page3.html 链接时，subnav 列表出现并插入另一个列表项下来。我通过简单地将下拉列表设置为固定位置而不是 position:absolute; 使其在桌面上工作但是，在移动设备和平板电脑上，触摸 page3.html仍将用作链接，因此用户当然会被重定向到 page3.html 而不是触发 subnav 列表。

有什么方法可以在用户第一次触摸链接时不触发链接而触发子导航列表？ :-) 我正在尝试为此寻求一个仅使用 CSS 的解决方案，但如果需要 JS，我会很乐意使用它。

提前致谢!

Answer 1

有一个用 jQuery 编写的 Wordpress 插件 ( Black Studio Touch Dropdown Menu ) 几乎可以满足您的需求。可以看看源码here并修改为独立于 Wordpress(如果这不是您正在使用的)。它主要检查设备是否是触摸屏设备，如果是，当您单击下拉菜单的父项时，它会展开它而不是单击链接。下一次，它会真正点击链接。