Javascript 如何在单击“聚焦”菜单时移除聚焦

我有一个汉堡包菜单，当我点击按钮时，它会激活菜单上的目标类。当菜单打开时，如果我再次单击菜单图标，它会折叠菜单，我不知道如何使其打开。这是我到目前为止得到的代码

//我在js中尝试模糊navTarget:focus
$（“导航a”）。单击（函数（）{
$（“nav a”）.removeClass（“nav选定”）；
$（this）.addClass（“navselected”）；
});
$（“#菜单”）。单击（函数（）{
$（“#导航目标：焦点”）.blur（）；
});
nav{
弹性：0.100%；
右边框：1px实心#386BA8；
背景色：#386BA8；
}
导航头{
填充：0rem 1rem；
}
导航a{
显示：块；
颜色：#000；
文字装饰：无；
填充：1rem；
边框顶部：1px实心#386BA8；
}
导航a：第一个孩子{
填充：0；
边界顶部：无；
}
.导航{
背景色：#6699CC；
顶部：0rem；
显示：无；
}
.隐藏{
显示：无；
}
.bufferspace{
填充：0；
}
#菜单{
背景色：#6699CC；
显示：块；
位置：固定；
光标：指针；
排名：0；
z指数：10；
}
#菜单一{
字号：2rem；
填充：1rem；
}
#导航目标{
垫面：2.8rem；
}
#导航目标：目标{
显示：块；
}
导航a:第一个孩子：悬停{
动画：无；
}
导航a:第一个孩子：悬停{
动画：无；
}
.navselected:第一个孩子{
背景色：无；
左边界：无；
}
}
我相信下面的解决方案可以解决您的问题。我使用
$（“#navTarget”）.toggleClass（“可见”）
切换CSS类，使
navTarget
可见


$（“导航a”）。单击（函数（）{
$（“#navTarget”）.toggleClass（“可见”）；
});
$（“#菜单”）。单击（函数（）{
$（“#导航目标：焦点”）.blur（）；
});
nav{
弹性：0.100%；
右边框：1px实心#386BA8；
背景色：#386BA8；
}
导航头{
填充：0rem 1rem；
}
导航a{
显示：块；
颜色：#000；
文字装饰：无；
填充：1rem；
边框顶部：1px实心#386BA8；
}
导航a：第一个孩子{
填充：0；
边界顶部：无；
}
.导航{
背景色：#6699CC；
顶部：0rem；
显示：无；
}
.隐藏{
显示：无；
}
.bufferspace{
填充：0；
}
#菜单{
背景色：#6699CC；
显示：块；
位置：固定；
光标：指针；
排名：0；
z指数：10；
}
#菜单一{
字号：2rem；
填充：1rem；
}
#导航目标{
垫面：2.8rem；
}
.可见{
显示：块；
}
导航a:第一个孩子：悬停{
动画：无；
}
导航a:第一个孩子：悬停{
动画：无；
}
.navselected:第一个孩子{
背景色：无；
左边界：无；
}
}
他们尝试以下代码并检查输出，它将满足您的要求。我使用了toggle（）jquery函数，它将导航切换为显示：block和显示：none


$（“导航a”）。单击（函数（）{
$（“nav a”）.removeClass（“nav选定”）；
$（this）.addClass（“navselected”）；
});
$（“#菜单”）。单击（函数（）{
//$（“#导航目标：焦点”）.blur（）；
$（“.navigation”）.toggle（）；
});
nav{
弹性：0.100%；
右边框：1px实心#386BA8；
背景色：#386BA8；
}
导航头{
填充：0rem 1rem；
}
导航a{
显示：块；
颜色：#000；
文字装饰：无；
填充：1rem；
边框顶部：1px实心#386BA8；
}
导航a：第一个孩子{
填充：0；
边界顶部：无；
}
.导航{
背景色：#6699CC；
顶部：0rem；
显示：无；
}
.hide{display:none；}
.bufferspace{填充：0；}
#菜单{
背景色：#6699CC；
显示：块；
位置：固定；
光标：指针；
排名：0；
z指数：10；
}
#菜单一{
字号：2rem；
填充：1rem；
}
#导航目标{
垫面：2.8rem；
}
导航a:第一个孩子：悬停{
动画：无；
}
导航a:第一个孩子：悬停{
动画：无；
}
.navselected:第一个孩子{
背景色：无；
左边界：无；
}
}
从菜单按钮中删除href，并从CSS中删除
：target
样式，改为在类更改时添加此样式

$("#menu").on("click", function() {
  $("#navTarget").toggleClass("openMenu");
});


$（“#菜单”）。在（“单击”，函数（）{
$（“#navTarget”）.toggleClass（“openMenu”）；
});
$（“.nav link”）。在（“单击”，函数（）{
$（“#navTarget”）.removeClass（“openMenu”）；
});
nav{
弹性：0.100%；
右边框：1px实心#386BA8；
背景色：#386BA8；
}
导航头{
填充：0rem 1rem；
}
导航a{
显示：块；
颜色：#000；
文字装饰：无；
填充：1rem；
边框顶部：1px实心#386BA8；
}
导航a：第一个孩子{
填充：0；
边界顶部：无；
}
.导航{
背景色：#6699CC；
顶部：0rem；
显示：无；
}
.隐藏{
显示：无；
}
.bufferspace{
填充：0；
}
#菜单{
背景色：#6699CC；
显示：块；
位置：固定；
光标：指针；
排名：0；
z指数：10；
}
#菜单一{
字号：2rem；
填充：1rem；
}
#导航目标{
垫面：2.8rem；
}
#navTarget.openMenu{
显示：块；
}
导航a:第一个孩子：悬停{
动画：无；
}
导航a:第一个孩子：悬停{
动画：无；
}
.navselected:第一个孩子{
背景色：无；
左边界：无；
}
}