Jquery 汉堡菜单点击问题

所以我做了一份汉堡包菜单，你可以在这里找到：。 我唯一的问题是，如果我点击我的div（3条黑色条纹），菜单将无法自动打开

我试过了，但没有结果。 我还尝试为每个元素复制我的函数，但是它也不起作用

这是我的密码：

$（函数（）{
$（“#切换”）。单击（函数（）{
$（'#icon'）。toggleClass（'menu-active'）；
//如果要在此基础上展开，请调用函数。
toggleNav（）；
});
});
函数toggleNav（）{
if（$（'#site_wrapper'）.hasClass（'show-menu'））{
//在导航关闭时做事情
$（“#site_wrapper”）.removeClass（'show-menu'）；
}否则{
//在Nav Open上做事
$（'#site_wrapper'）.addClass（'show-menu'）；
}
}
//单击外部菜单将其隐藏
$（文档）。在（'单击'）上，函数（e）{
var$this=$（e.target）；
if（$this.closest（“#aside_menu”）.length==0&$this[0].id！=“toggle”）{
$（“#site_wrapper”）.removeClass（'show-menu'）；
$（“#icon”）.removeClass（'menu-active'）；
}
});
.toggle{
宽度：70px；
高度：70像素；
显示：块；
背景色：#CACACA；
位置：相对位置；
}
.图标{
宽度：24px；
高度：4px；
背景色：#000；
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
左：0；
底部：0；
过渡：全部。4s轻松；
}
.icon:之前，.icon:之后{
宽度：100%；
高度：4px；
显示：块；
内容：''；
背景色：#000；
位置：绝对位置；
过渡：全部。4s轻松；
}
.图标：之前{
顶部：-8px；
}
.图标：之后{
顶部：8px；
}
.菜单激活{
背景：无；
}
.菜单激活：之前{
排名：0；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
.菜单激活：之后{
排名：0；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
#站点包装器{
位置：相对位置；
溢出：隐藏；
宽度：100%；
身高：100%；
背景颜色：皇家蓝；
}
#容器{
宽度：100%；
高度：500px；
位置：相对位置；
背景色：番茄；
/*使用transform3d上的Pour forcer l'accélération GPU*/
-webkit转换：translate3d（0）；
变换：translate3d（0）；
-webkit转换：.3s轻松所有；
过渡：放松一切；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.显示菜单#容器{
-webkit转换：translate3d（300px，0，0）；
变换：translate3d（300px，0，0）；
}
#菜单旁{
宽度：300px；
身高：100%；
位置：绝对位置；
排名：0；
右：-300px；
背景：番茄；
}
只需将
指针事件：none
添加到
.icon
类元素及其伪类

.icon, .icon:before, .icon:after{
   pointer-events: none;
}