html - 折叠侧边栏菜单Flex

我正在为我的网站创建管理面板，并获得了侧边栏菜单，仅在单击它时才需要将其隐藏到汉堡图标并将其折叠。我一直在寻找解决方案，但没有找到太多。我希望你们能帮助我解决我的问题。我得到了带有以下代码的flex侧边栏菜单：

    .sidebar{
  @include flexbox();
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex: 0 0 18%;
  min-height: 100%;
  margin: 0;
  background-color: $oc-gray-9;
  a{
    display: block;
    width: 87.25%;
    text-align: left;
    padding-left: 5vh;
    text-decoration: none;
    color: $oc-gray-6;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 10vh;
    font-family: CaviarDreams;
    font-size: 1.15vw;
  }
  a:hover{
    background-color: $oc-red-9;
    color: $oc-gray-2;
    .menu-img {
    opacity: 1;
  }
  }
  .logo-img{
    width: 90%;
    height: auto;
  }
  .menu-img {
    width: 7%;
    height: auto;
  }

}

像这样的HTML：

<div class="sidebar">
<img src="logo.png" class="logo-img">
  <a class="hvr-fade" href="index.php"><img src="dash.png" class="menu-img"> Dashboard</a>
    Other code here....
</div>

有什么主意我该怎么做？

谢谢。

最佳答案

使用jQuery：

$(document).on('click', '.<your hamburger icon class>', function(){
     $('.sidebar').slideToggle();
})

这应该是我在大多数侧边栏导航中使用的技巧。

如果您以前没有使用过Jquery，则它非常简单。但这使DOM操作变得非常容易。基本上，它只是将事件处理程序绑定到您的汉堡包类，然后在每次单击汉堡包时执行该功能以滑动切换边栏。

关于html - 折叠侧边栏菜单Flex，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47755129/