这是我的场景:
我正在使用 AngularJS 创建侧边栏菜单。当用户选择汉堡包 图标时,应该将菜单向右滑动。当用户选择删除按钮时,菜单应该向左滑动(离开屏幕)。
当前场景:
菜单按预期打开和关闭。但是,当菜单打开时,页面上的其余内容就会消失。我花时间在网上查看,但无法确定问题所在。有什么提示或建议吗?
这是我的存储库:
代码:
Controller
"use strict";
teaApp.controller("menuController", function($scope) {
$scope.toggled = false;
$scope.toggle = function() {
$scope.toggled = !$scope.toggled;
}
});
查看
<div ng-controller="menuController">
<h3 class="glyphicon glyphicon-menu-hamburger" id="menu-align-hamburger" ng-click="toggle()" ng-show="!toggled"></h3>
<div class="menu-box" ng-show="toggled">
<h3 class="glyphicon glyphicon-remove" id="menu-align-remove" ng-click="toggle()"></h3>
</div>
<div>
<h1 class="text-center">Hello StackOverflow!!</h1>
</div>
</div>
CSS
.menu-box {
background-color: #403b41;
width: 20%;
height: 100vh;
}
#menu-align-hamburger {
padding-left: 15px;
cursor: pointer
}
#menu-align-remove {
padding-left: 15px;
cursor: pointer;
color: dimgrey;
}
最佳答案
当您的菜单展开时,它最终会占据整个内容区域,将您的“Hello”文本推到侧边栏下方。
创建更灵活的布局,例如将 display:inline-block
应用到菜单和内容区域将导致内容在菜单打开时简单地“移动”而不是被推送在菜单下方。
P.S.,如果您向下滚动得足够远,您会看到您的内容仍然存在。它只是隐藏在 View 之外,具体取决于您的分辨率。
关于javascript - ng-show 隐藏页面上的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37625608/