JS实现侧边栏显示隐藏

作者: 微语博客 | 来源:发表于2022-06-26 14:19 被阅读0次

    网页中侧边栏是一个重要的排版位置,尤其是侧边导航栏用的最多。在一些窄屏的侧边导航栏中,控制侧边导航栏的显示与隐藏可以让网页显示更多内容,也可以美化网页。侧边栏隐藏和显示有多种实现方法,这里演示一种简单的方法。

    demo案例

    下面代码实现了一个侧边栏的显示与隐藏。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>sidebar</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .sidebar {
          width: 200px;
          height: 500px;
          background: #f40;
          margin-top: 40px;
          position: absolute;
          left: 0px;
          z-index: 200;
        }
        .ctrl {
          color: aqua;
          font-weight: bold;
          margin: auto;
          padding: auto;
          width: 100px;
        }
      </style>
    </head>
    <body>
      <div class="sidebar"></div>
      <div class="ctrl">显示/隐藏</div>
    </body>
    <script>
      let sidebar = document.getElementsByClassName('sidebar')[0];
      function show(){
        sidebar.style.left = '0px';
      }
      function hide(){
        sidebar.style.left = '-200px';
      }
      document.getElementsByClassName('ctrl')[0].onclick = function(){
        if(sidebar.style.left != '-200px'){
          hide();
        }else {show();}
      };
      
    </script>
    </html>
    

    基本思路就是通过判断侧边导航栏容器元素的左边距离,设置为负数的时候属于隐藏状态。可以通过设置过渡的属性实现显示和隐藏切换时的动画效果。

    相关文章

      网友评论

        本文标题:JS实现侧边栏显示隐藏

        本文链接:https://www.haomeiwen.com/subject/lzcgvrtx.html