javascript - 在小屏幕上切换侧边栏时无法优先考虑按钮点击

问题描述

这是我的代码笔： https ://codepen.io/rjtbansal/pen/BaLawaO

基本上我有展开/折叠按钮，它可以切换显示/隐藏侧边栏。在较小的屏幕（宽度小于 500 像素）上，它应该会自动折叠。我已经能够通过媒体查询来实现这一点。但是，我希望按钮优先，因此即使在单击按钮时自动折叠后，它也应该展开/折叠侧边栏。

这是HTML：


  <body>
    
    <div id="sidebar" class="sidebar">
      Sidebar
    </div>
    
    <button id="toggle"> Expand/Collapse </button>
   
  </body>

CSS：

body {
        background-color: #1d2126;
        color: white;
        height: 100%;
        
      }
          
      .sidebar {
        width: 300px;
        background-color: yellow;
        color: black;
        height: 100%;
        position: absolute;
      }
      
      .sidebar--collapse {
        display: none; 
      }
      
      .sidebar--expand {
       display: block; 
      }
      
      button {
       position: absolute; 
      }
      
      @media screen and (max-width: 500px){   
        .sidebar {
          display: none;
        }
      }

js：

const toggleButton = document.querySelector("#toggle");
    
    toggleButton.addEventListener("click", function() {
      const sidebar = document.querySelector("#sidebar");
      const sidebarClasses = sidebar.classList;
      
      if(sidebarClasses.contains('sidebar--expand')){
           sidebar.classList.remove('sidebar--expand');
           sidebar.classList.add('sidebar--collapse');
      }
      else {
        sidebar.classList.remove('sidebar--collapse');
        sidebar.classList.add('sidebar--expand'); 
      }
                                  
    });

标签： javascriptcss

javascript - 在小屏幕上切换侧边栏时无法优先考虑按钮点击

问题描述

解决方案

推荐阅读