智能手机上的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链接时显示的下拉菜单。

在手机和平​​板电脑上，我希望菜单的行为类似于手风琴，因此当用户触摸page3.html链接时，会出现subnav列表，并将其他列表项向下推。我只需将下拉列表设置为固定位置而不是position:absolute;即可在桌面上工作。但是，在移动设备和平板电脑上，page3.html上的触摸仍然可用作链接，因此用户是当然，重定向到page3.html而不是触发subnav列表。

是否有任何方法可以在用户第一次触摸时触发子区域列表而不触发链接？ :-)我正在努力寻找一个只有CSS的解决方案，但如果需要JS，我很乐意使用它。

提前致谢！

Answer 1

有一个用jQuery（Black Studio Touch Dropdown Menu）编写的Wordpress插件可以完成您想要的任务。您可以查看源代码here并修改为独立于Wordpress，如果这不是您正在使用的。它基本上检查设备是否是触摸屏设备，如果是，当您单击下拉菜单的父级时，它会扩展它而不是单击链接。下次，它实际上会点击链接。