在網頁的移動視圖中隱藏div元素

Question

我正在構建一個MEAN堆棧應用程序。 目前，我正在嘗試使用CSS媒體規則在移動視圖中隱藏某些div元素。 在移動視圖中使用按鈕下拉列表將其列出，使用ng-click單擊時將折疊設置為true / false。 它按預期工作。 但是在移動視圖中，如果激活了下拉菜單，並且我將瀏覽器擴展到更大的尺寸，則菜單會出現在Web視圖中，這是不期望的。 有人可以幫忙嗎？

以下是部分代碼：

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidbar" aria-expanded="false" aria-controls="sidbar" ng-init="sidCollapsed=true" ng-click="sidCollapsed=!sidCollapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div id="sidbar" collapse="sidCollapsed" class="sidbar"> <!--<ul class="nav navbar-nav navbar-left">--> <ul class="nav navbar-nav"> <li><a ng-class="{'active':$location.path() == '/home'}" href="#/home">Home</a></li> <li><a ng-class="{'active':$location.path() == '/profile'}" ng-show="user" href="#/profile">Profile</a></li> <li><a ng-class="{'active':$location.path() == '/admin'}" ng-show="user && user.roles.indexOf('admin')>=0" href="#/admin">Admin</a></li> <li><a ng-class="{'active':$location.path() == '/forms'}" ng-show="user" href="#/forms">Forms</a></li> </ul> </div> css: @media (min-width: 768px){ .sidbar { display:none; }} 

Answer 1

從外觀上看，您正在使用Bootstrap，因此可以使用hidden-xs類

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidbar" aria-expanded="false" aria-controls="sidbar" ng-init="sidCollapsed=true" ng-click="sidCollapsed=!sidCollapsed">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>



<div id="sidbar" collapse="sidCollapsed" class="sidbar hidden-xs">
  <!--<ul class="nav navbar-nav navbar-left">-->
  <ul class="nav navbar-nav">
    <li><a ng-class="{'active':$location.path() == '/home'}" href="#/home">Home</a>
    </li>
    <li><a ng-class="{'active':$location.path() == '/profile'}" ng-show="user" href="#/profile">Profile</a>
    </li>
    <li><a ng-class="{'active':$location.path() == '/admin'}" ng-show="user && user.roles.indexOf('admin')>=0" href="#/admin">Admin</a>
    </li>
    <li><a ng-class="{'active':$location.path() == '/forms'}" ng-show="user" href="#/forms">Forms</a>
    </li>
  </ul>
</div>

您可以在Bootstrap文檔中找到更多可用的類來顯示和隱藏元素，具體取決於瀏覽器的大小。

• 響應實用程序類