Question

以下是我的情景：

我正在使用AngularJS创建侧边栏菜单。当用户选择汉堡包图标时，它应该将菜单向右滑动。当用户选择删除按钮时，菜单应向左滑动（离开屏幕）。

当前情景：

菜单按预期打开和关闭。但是，当菜单打开时，页面上的其余内容会消失。我花时间在网上看，但无法隔离问题。有任何提示或建议吗？

这是我的存储库：

https://bitbucket.org/ChaseHardin/teaplanner/

代码：

控制器

"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;
}

Answer 1

当你的菜单扩展时，它会占用整个内容区域，推动你的＆＃34; Hello＆＃34;侧栏下方的文字。

创建更灵活的布局，例如将display:inline-block应用于菜单和内容区域将导致内容简单地移动到＆＃34;当菜单打开而不是被推到菜单下方时。

P.S。，如果你向下滚动足够远，你会发现你的内容仍然存在。根据您的分辨率，它只是隐藏在视野之外。

ng-show正在隐藏页面上的所有内容

1 个答案: