Javascript单击/touchstart不总是工作

我有一个语言选择器在我的网站顶部，当我点击它时，它应该显示所有的语言，当我点击正文时，它应该显示。现在我的问题是，有时它工作得很完美，但有时根本不起作用。在我的手机上，它经常不起作用

这是随机发生的，每次刷新网站都会使它再次工作

$('.topHeader ul li ul').hide();
$('html').on('click touchstart', function() {
    $('.topHeader ul li ul').hide();
});
$('.topHeader').on('click touchstart', function() {
    event.stopPropagation();
});
$('.topHeader ul li a').on('click touchstart', function() {
    $('.topHeader ul li ul').toggle();
});

Jsfiddle：

---

我没有使用引导，我只是使用了一些类；）

问题是列表项占据了页面宽度的100%，您没有意识到您正在单击它们，而不是单击

html

选择器所包含的区域

只要添加这个css，它就会说明我的意思

.topHeader ul li ul li {
  background:azure;
}

一个快速解决方法是，通过单击列表项，您还可以隐藏显示的项目：

$('html').on('click touchstart', function() {
  $('.topHeader ul li ul').hide();
});
// I have added this extra handler
$('.topHeader ul li ul li').on('click touchstart', function() {
  $('.topHeader ul li ul').hide();
});

---

编辑的JSIDLE:

您需要这个：@KWeiss已经有了，没有包括整个JS，只有对这个问题很重要的部分$（函数（）{/*此处代码*/}）；谢谢你的回答，问题是当点击英语应该显示子菜单，现在这是一些工作不正常。在手机上，点击英语会改变背景颜色（在CSS中是这样做的），但不会显示子菜单。