Javascript 与父元素和子元素相关的问题

我是Javascript编码的新手。我想做一个移动菜单，如果我在菜单外面点击，菜单就会消失。我做得很成功

现在的问题是，当我点击汉堡图标时，菜单没有展开。但是当我点击它的父元素时，它工作得很好

我的Javascript代码有什么问题

下面是我的代码

身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#146875；
}
.topnav a{
浮动：左；
显示：块；
颜色：#ffffFF；/*字体颜色*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景颜色：#00e5ff；/*顶部导航菜单后悬停颜色*/
颜色：黑色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和（最大宽度：900px）/*移动屏幕故障*/
{
.topnav a:非（：第n个子（-n+3））{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：900px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
var=document.getElementById（'myTopnav'）；
window.onclick=函数（事件）{
如果（event.target.parentNode！==消失）{
消失。className=“topnav”；
}
}

这里的问题是

if (event.target.parentNode !== disappear ){
    disappear.className = "topnav";
}

单击图标（i标记）时，父节点是锚定标记。所以这是真的。我已将代码更改为下面的。这应该适用于您的示例，还要检查下面的整个代码片段

if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear)

身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
托普纳夫先生{
溢出：隐藏；
背景色：#146875；
}
.topnav a{
浮动：左；
显示：块；
颜色：#ffffFF；/*字体颜色*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景颜色：#00e5ff；/*顶部导航菜单后悬停颜色*/
颜色：黑色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和（最大宽度：900px）/*移动屏幕故障*/
{
.topnav a:非（：第n个子（-n+3））{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：900px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
var=document.getElementById（'myTopnav'）；
window.onclick=函数（事件）{
if（event.target.parentNode！==消失&&event.target.parentNode.parentNode！==消失）{
消失。className=“topnav”；
}
}