行为不端的子菜单（js或hover-as-touch） - 奇怪的是没有在jsfiddle上复制[well]

Question

在SO社区的帮助下，我将悬停激活的菜单扩展为触控式菜单。但是在Safari上菜单通常根本不会激活，并且在桌面/笔记本电脑上使用Firefox和IE，子菜单表现得很奇怪。正如标题所说，jsfiddle上的相同代码可以正常工作;失败主要发生在我的网站whyisthisnight.com上。

misbehaving.menu.html（阅读misbehaving.menu.css＆amp; misbehaving.menu.js）

Jsfiddle（我相信与上面相同的代码）

报告的问题：

• iPhone上的Safari（触摸）：MENU有时根本不会激活。

• 桌面/ FF / IE上的FF / IE（悬停+点击）：当选择子菜单项并使用BACK返回时，原始页面的子菜单表现不佳。有时打开页面并展开子菜单并选择一个项目，或者单击菜单时，轮廓框架会显示先前选择的子菜单项。

• 有时，jsfiddle代码在Safari / iPhone上行为异常如下：点击MENU，菜单展开;点击菜单外，菜单折叠（到目前为止，确定）。但再次点击MENU，子菜单展开然后折叠。应该保持扩展。

JS使用touchstart和slidedown / slideup来模拟触摸屏的悬停状态。我不知道绑定是否错误，JS中引用了错误的css元素，或者是什么！

一些JS是：

`$('body').bind('touchstart', function() {});
var down = function() {
$('ul.Menu li ul').slideDown(400) /* default is 400ms */
$('ul.Menu li').one('click', up)
}
var up = function() {
$('ul.Menu li ul').slideUp(400)
$('ul.Menu li').one('click', down)
}
$('ul.Menu li').one('click', function() {
down()
})`

我希望有人可以发现一个适用于所有平台的简单解决方案。

提前致谢。