Javascript 让手机用户可以点击下拉菜单的困惑

嘿，我在点击下拉菜单时遇到了一些问题。在悬停状态下，一切正常，但我希望手机用户可以点击。请查看我的代码，如有任何帮助，将不胜感激。我想让使用PC的人保持悬停状态，但也希望手机的点击功能正常

非常感谢 萨姆

$document.readyfunction{ $'.topnav'。单击函数{ $'.sub nav'.toggleClass'visible'； }; }; .subnav ul.sub-nav{ 显示：无； } .subnav ul.visible{ 显示：块； } 磁砖：悬停在a上{ 背景色：fff； 边界半径：0 0 5px 5px； -网络工具包盒阴影：-1px-1px 4px 2px rgba0,0,0.51； -莫兹盒阴影：-1px-1px 4px 2px rgba0,0,0.51； 盒影：-1px-1px 4px 2px rgba0,0,0.51； -webkit过渡：0.5s易用性； -moz转换：0.5s易用性； -o型过渡：0.5s缓进； } 海德纳夫，大约{ 宽度：13%； 浮动：左； 利润率：0.3%； 过渡：0.5s缓解； -webkit过渡：0.5s缓解； -moz过渡：0.5s放松； -o型过渡：0.5s缓解； } 海德尔纳夫：悬停{ 背景色：fff； 边界半径：0 0 5px 5px； 垫底：10%； -网络工具包盒阴影：-1px-1px 4px 2px rgba0,0,0.51； -莫兹盒阴影：-1px-1px 4px 2px rgba0,0,0.51； 盒影：-1px-1px 4px 2px rgba0,0,0.51； -webkit过渡：0.5s易用性； -moz转换：0.5s易用性； -o型过渡：0.5s缓进； } 头像投影瓦{ 宽度：13%； 浮动：左； 利润率：0.3%； 过渡：0.5s缓解； -webkit过渡：0.5s缓解； -moz过渡：0.5s放松； -o型过渡：0.5s缓解； } headernav.projecttile:悬停{ 背景色：fff； 边界半径：0 0 5px 5px； 垫底：16%； -网络工具包盒阴影：-1px-1px 4px 2px rgba0,0,0.51； -莫兹盒阴影：-1px-1px 4px 2px rgba0,0,0.51； 盒影：-1px-1px 4px 2px rgba0,0,0.51； -webkit过渡：0.5s易用性； -moz转换：0.5s易用性； -o型过渡：0.5s缓进； } 海德纳夫亚纳夫酒店{ 显示：无； 位置：绝对位置； 边界半径：0 0 5px 5px； 列表样式类型：无； 填充：0.5%； 宽度：自动； 利润率：1.8%0； } headernav.subnav:悬停ul{ 显示：块； } 校长{ 背景色：透明； 宽度：100%； 字号：0.8em； 线高：1.6； -webkit过渡：0.5s缓解； -moz过渡：0.5s放松； -o型过渡：0.5s缓解； } 头纳夫。亚纳夫。乌利：悬停{ 不透明度：0.8； 文字装饰：下划线； 字体大小：粗体； -webkit过渡：0.5s易用性； -moz转换：0.5s易用性； -o型过渡：0.5s缓进； } .当前{ 宽度：自动； 填充物：5%9%； 利润率：0.18%； 颜色：22222； 浮动：左； 边界半径：0 0 5px 5px； -网络工具包盒阴影：-1px-1px 4px 2px rgba0,0,0.51； -莫兹盒阴影：-1px-1px 4px 2px rgba0,0,0.51； 盒影：-1px-1px 4px 2px rgba0,0,0.51； 字体大小：粗体； 背景色：fff； } 托普纳夫先生{ 颜色：22222； 文字装饰：无； 字体大小：粗体； 颜色：22222； 填充物：5%9%； 利润率：0.2%； 浮动：左； -webkit过渡：0.5s缓解； -moz过渡：0.5s放松； -o型过渡：0.5s缓解； } .currenttile{ 宽度：18%； 浮动：左； 高度：自动； 保证金：0； } 关于我们 项目

---

这应该可以做到这一点

目前它似乎只为单击启用-我没有看到任何基于悬停的操作。所有CSS都有：悬停状态。点击在allit's不起作用，因为移动设备处理悬停的方式不同。我不会依赖任何类型的移动设备悬停解决方案。是的，这就是为什么我希望下拉菜单在点击时起作用，但我不知道如何使它工作

$(document).ready(function() {
        $('.topnav').click(function() {
            $('.sub-nav').toggle();
        });
    });