[英]Hiding div elements in mobile view of webpage
我正在构建一个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; }}
从外观上看,您正在使用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文档中找到更多可用的类来显示和隐藏元素,具体取决于浏览器的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.