使用Javascript隐藏和显示导航栏

我的页面左侧有一个小小的导航栏。你在它的左边有主导航点，当你点击其中一个点时，在右边有一个带有子页面链接的列表。 我在导航栏的右侧添加了一个小按钮，这样我可以关闭它，并为实际内容提供更多空间

现在是棘手的部分。我希望当菜单关闭时，主导航项不会刷新页面或转到任何链接。他们应该再打开右菜单

不能提供全部代码这里是我做的一个想法

$（文档）.ready（函数（）{
$（“#隐藏按钮”）。单击（函数（）{
$（“#侧边栏内容”）。切换（“幻灯片”）；
});
});
.leftnavigation{
高度：100vh；
位置：固定；
}
.图标栏分区{
填充：8px；
显示：块；
过渡：所有0.3秒缓解；
颜色：白色；
字号：18px；
}

试验
试验
我就是这样做的


（函数（）{
var buttonList=document.getElementsByClassName（“切换”）；
对于（var index=0；index
#导航{
位置：固定；
底部：0；
左：0；
排名：0；
}
#边栏内容{
背景色：#385400；
过渡：全部为1.2秒；
溢出：隐藏；
身高：100%；
浮动：左；
宽度：0；
}
#侧边栏-content.open{
宽度：215px；
}
.图标栏{
背景色：#2D4400；
身高：100%；
浮动：左；
}
.图标栏>div{
过渡：所有0.3秒缓解；
字号：18px；
显示：块；
填充：8px；
颜色：白色；
}
.切换{
光标：指针；
}

试验


试验


是的，这很好，我已经做了一些事情，但只有浅绿色部分应该切换，然后当您单击“测试”（通常会带您进入该菜单的主页）时，它应该再次切换。@Frekell所以深绿色部分应该始终可见？是的。很抱歉，我没有在我的帖子中说清楚。是的，这是我想要的，它帮助我了解了我现在想要做什么。谢谢你的帮助。@Frekell为什么？少了什么吗？