javascript - 在网页的移动 View 中隐藏div元素

Question

我正在构建一个 MEAN 堆栈应用程序。目前，我正在尝试使用 css 媒体规则在移动 View 中隐藏某些 div 元素。在移动 View 中使用按钮下拉列表列出它，使用 ng-click 将折叠设置为 true/false。它按预期工作。但是在移动 View 中，如果下拉菜单被激活并且我将浏览器扩展到更大的尺寸，则菜单会出现在 Web View 中，这不是预期的。任何人都可以提供帮助吗？

部分代码如下:

<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 文档中找到更多用于根据浏览器大小显示和隐藏元素的可用类。

• > Responsive Utility Classes