Javascript 单击事件不总是注册

我正在尝试制作一个可以在手机上使用的web应用程序。 下面是我的导航栏，位于我网站所有页面的顶部。
问题是我的汉堡包。图标。当屏幕调整大小时（例如在iPhone上），可以单击它来下拉并再次隐藏我的导航栏。然而，我似乎有零星的无反应，有时从它。几乎从不在Safari或iOS上工作。通常在Chrome上不起作用。如果我刷新页面几次或重新访问页面，它会起作用，或者不起作用，就像掷硬币一样

$（文档）.ready（函数（）{
“严格使用”；
$（“.icon”）。单击（函数（）{
$（“.topnav”）。切换类别（“响应”）；
});
});
标题{
宽度：100%；
高度：51px；
位置：相对位置；
背景色：#52bad5；
边框底部：5px实心#2C9AB7；
溢出：滚动；
文本对齐：左；}
标题a{
顶部：0；}
标题a.标志{
宽度：自动；
身高：100%；
利润率：0px 10px；
位置：相对位置；
颜色：#fff；
最高：0%；
字体大小：粗体；
显示：内联块；
字母间距：0px；
文字装饰：无；
文本对齐：左；}
标题：topnav{
位置：相对位置；
显示：内联块；
顶部：-2px；
左：0；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px 14px 16px；
文字装饰：无；
字体大小：17px；}
标题.图标{
可见性：隐藏；
高度：31px；
宽度：20px；
位置：绝对位置；
排名：0；
右：0；
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：10px 25px；
文字装饰：无；
字体大小：25px；
z指数：101；
游标：指针；}
.icon:hover、.topnav:hover{
背景色：#2C9AB7；
颜色：黑色；}
@仅介质屏幕和（最大宽度：640像素）{
.货柜头导航{
边际上限：0px；
右边距：0px；
边缘底部：0px；
左边距：0px；
宽度：100%；}
标题{
位置：相对位置；
宽度：100%；
左：0；
背景色：#52bad5；
边框底部：5px实心#2C9AB7；
文本对齐：居中；
溢出：可见；
对齐内容：flex-end；}
标题a.标志{
显示：块；
浮动：左；
字体大小：粗体；
文本对齐：左对齐；
保证金：0px 0px 0px 10px；
字母间距：正常；}
标题：topnav{
显示：无；}
标题.图标{
显示：内联块；
文本对齐：居中；
能见度：可见；
游标：指针；}
头球，有反应{
显示器：flex；
位置：相对位置；
清除：左；
弯曲方向：立柱；
宽度：70px；
排名：0；
左：0；
背景#52BAD5；
文本对齐：左对齐；
z索引：101；}}

HOMEAABBBCCCDDD&9776；
通过添加警报（“您单击了按钮”）；对于我的代码，我注意到它与.click事件无关，而是与整个.js文件有关。有什么想法吗？使用你提供的chrome对我来说很好。您在控制台中是否遇到任何错误？如果.js文件中存在其他问题，您可以提供更多代码吗？