Html 选择链接后折叠的导航栏（Jquery）

我试着教自己如何制作一个反应灵敏的可折叠导航条。我已经设法让导航栏在低于某个宽度时折叠，并在单击汉堡包菜单时打开，但我正在努力让它在单击其中一个链接时折叠。例如，“联系我们”将转到页面的右侧部分，但导航栏将保持打开状态

$（文档）.ready（函数（）{
$nav=$（'.nav'）；
$toggleCollapse=$（'.toggleCollapse'）；
$toggleIcons=$（'.toggleIcons'）；
/*单击事件切换菜单*/
$toggleCollapse.单击（函数（）{
$nav.toggleClass（'collapse'）；
})
});
。父项已修复{
位置：固定；
宽度：100%；
z指数：99999；
}
.导航{
填充：02rem；
高度：0雷姆；
最小高度：9vh；
溢出：隐藏；
过渡：高度1s，易于进出；
}
.导航.导航菜单{
证明内容：之间的空间；
}
.导航开关折叠{
位置：绝对位置；
排名：0；
宽度：90%；
光标：指针；
显示：无；
}
.nav.切换折叠.切换图标{
显示器：flex；
证明内容：柔性端；
填充：1.4rem 0；
}
.nav.切换折叠.切换图标i{
字体大小：1.4rem；
}
.崩溃{
高度：20雷姆；
}
.资产净值.资产净值项目{
显示器：flex；
保证金：0；
填充：0；
}
.导航.导航项目.导航链接{
填充：1.4rem；
字号：1.1rem；
位置：相对位置；
过渡：所有0.2秒缓解；
}
.导航.导航项目.导航链接：悬停{
背景色：白色；
}
.导航.导航项目.导航链接：悬停a{
颜色：var（--text-navy）；
}
.nav.nav品牌a{
字体大小：1.3rem；
填充：1.3rem 0；
文字装饰：无；
显示：块；
字体系列：蒙特塞拉特加粗；
游标：默认值；
}
.nav.social{
填充：1.5雷姆0；
}
.nav.social i{
填充：0.2rem
}
.nav.social i:悬停{
颜色：#989b9b；
}









您的代码片段不起作用。请对其进行故障排除，使其正常工作并演示您的问题。