Javascript 单击页面链接一次，导航/汉堡图标消失

我正在设计一个单页滚动网站。当我在屏幕宽度小于780px（汉堡图标出现时）的导航栏上单击页面链接时，汉堡图标消失。除非我刷新页面，否则我无法取回它。单击页面链接一次后，导航栏也会全屏消失。我想保持汉堡图标和顶部导航在任何时候都可以看到。我用来折叠780px显示的全屏菜单的javascript导致了这个问题，但我需要它，否则当单击链接时菜单不会消失。谢谢所有能帮忙的人

$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
$（“#菜单”）.slideToggle（）；
});
});
@媒体屏幕和（最大宽度：780px）{
导航{
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
左：0；
显示：块；
不透明度：1.0！重要；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
导航ul{
宽度：100%；
保证金：0自动；
填充：0；
显示：无；
浮动：无；
}
李国荣{
字体大小：1.3em；
字体大小：正常；
线高：40px；
宽度：100%！重要；
保证金：0；
填充：0；
}
nav ul li:n第（1）类{页边距顶端：20%；}
nav ul li:悬停{背景：#565758；}
海军ulli a{
颜色：白色！重要；
字体系列：“Lato”，无衬线；
边框底部：无！重要；
显示：内联块；
}
主动链路{
颜色：白色！重要；
字体大小：1.3em；
}
导航ulli a：悬停{
颜色：白色；
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
边距：0！重要；
填充：1em！重要；
文本对齐：右对齐；
显示：块；
浮动：对；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{背景色：#747475！重要；显示：块；高度：100vh；}
}​







​您还需要将切换添加到复选框中。它是一个jQuery函数，使用特定的动画和样式

$('#show-menu').click(function() {
    $('#menu').slideToggle();
});

编辑


我添加了一个工作示例。为了更好的设计，我没有在这里使用开关。现在，菜单还可以通过单击复选框切换：-）


$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
$（“#菜单”）.slideToggle（）；
});
$（'#显示菜单'）。更改（函数（）{
如果（选中此项）
$（“#菜单”）.slideDown（）；
其他的
$（“#菜单”）.slideUp（）；
});
});
@媒体屏幕和（最大宽度：780px）{
导航{
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
左：0；
显示：块；
不透明度：1.0！重要；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
导航ul{
宽度：100%；
保证金：0自动；
填充：0；
显示：无；
浮动：无；
}
李国荣{
字体大小：1.3em；
字体大小：正常；
线高：40px；
宽度：100%！重要；
保证金：0；
填充：0；
}
nav ul li:n第（1）类{页边距顶端：20%；}
nav ul li:悬停{背景：#565758；}
海军ulli a{
颜色：白色！重要；
字体系列：“Lato”，无衬线；
边框底部：无！重要；
显示：内联块；
}
主动链路{
颜色：白色！重要；
字体大小：1.3em；
}
导航ulli a：悬停{
颜色：白色；
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
边距：0！重要；
填充：1em！重要；
文本对齐：右对齐；
显示：块；
浮动：对；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{背景色：#747475！重要；显示：块；高度：100vh；}
}​







​谢谢你的回答。多梅特恩，我希望这能奏效，但事实并非如此。我可能设置错了。我在当前javascript行下方添加了3行带有#show menu的javascript行（整个代码段），并在下一行中添加了#menu。我在这些行的正下方添加了您的行，并将所有“}）；”放在它们自己的行的下面。“不幸的是，一切都没有改变。”康妮我补充了一个有效的例子。希望这对你有帮助，如果你不问我的话。谢谢你，多梅特恩！除了两件事外，这非常有效：为了让菜单展开，我必须点击汉堡图标两次。另外，当页面为全宽时，我必须刷新页面以显示顶部导航。但这是迄今为止最接近完美的@康妮，我期待着你能自己解决这些问题；-）这是你原来问题的答案吗？您可以将其标记为线程答案吗？：-）完成！谢谢你，多梅顿。