Question

  <script>

     function toggleSidebar()
     {
       document.getElementById("sidebar").style.display = "none";

      }

    </script>

    </head>
    <body>
    <div class="col-md-12 col-sm-12">
    <nav class="navbar navbar-default cs-navabar navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img  class="left-logo" src="lefttoplogo.svg">
            <h6 class="emotext"><u>login</u></h6> <img  class="right" src="rtlogotop.svg">
                <p class="logout-text"><u>LOGOUT</u></p> 
          </a>
        </div>
      </div>
    </nav>
    </div>
    <div id= "sidebar">
      <div class="toggle-btn" onclick="toggleSidebar()">
        <span></span>
        <span></span>
        <span></span>

      </div>

      <img class="adminlogo" src="admin.svg">
       <ul>
       <img src="Untitled-3.svg">
        <li>Add </li>
        <li>View</li>
        <li>App</li>
        <li>Add</li>
        <li>SMS  </li>
        <li>Edit</li>
        <li>SMS</li>
        <li>Contact</li>
      </ul>
    </div>

上面是左侧边栏的代码片段，我正面临有关侧边栏移动设备响应性的问题，当屏幕宽度减小时它不会隐藏。如果有人可以帮助解决上述问题吗？

Answer 1

您可以使用window.width编写一个函数，因此每当宽度小于480时，您就可以定位要隐藏的元素。像这样：

function navigation() {
  if (window.width <= 480) {
    document.getElementById("sidebar").style.display = "none";
  }
}

Answer 2

如果您只想隐藏它，请使用：

@media(max-width: 420px) {
    #sidebar {
        display: none;
    }
}

左侧酒吧响应问题

2 个答案: