Question

在窄屏幕上，Bootstrap导航栏显示为覆盖页面内容的按钮面板。有很多问题和答案可以解决在点击面板时隐藏该面板的问题 - 这不是我想要解决的问题。

这个问题是当AngularJs模板生成这些链接时，点击页面主体中的链接和时如何隐藏该面板。有一个简单的解决方案吗？

以下是Angular插入内容的主页的相关内容：

<html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="eepApp"
        ng-controller="AppController">
<head>
...
</head>
<body>

<!-- Small screen menu -->
<div class="navbar navbar-default navbar-fixed-top visible-xs" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#navbar-collapse-id">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <ul class="nav navbar-nav navbar-left pull-left">
                ...
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-id">
            <ul class="nav navbar-nav navbar-right">
                ...
            </ul>
        </div>
    </div>
</div>

<!--  Bigger screen menu -->
<div class="navbar navbar-default navbar-fixed-top hidden-xs" role="navigation">
    ...
</div>

<!--  Page content inserted by Angular here -->
<div id="partials" ng-view="partials"></div>

<script src="various JavaScript inculding Angular and jQuery"/>

<script>

// Hide navbar menu when item clicked
$(document).on('click', '.navbar-collapse.in', function(e) {
    if ($(e.target).is('a') || $(e.target).parent().is('a')) {
        $(this).collapse('hide');
    }
});

</script>

</body>
</html>

Answer 1

我已经采用了这种方法，当页面改变时，使用jQuery删除保持导航栏菜单打开的类（在＆＃34;中称为＃34;）

$scope.$on('$routeChangeStart', function() {
    // Close navbar menu (if open) by removing the class that makes it visible
    $('#navbar-collapse-id').removeClass('in');
});

这被添加到整个app控制器中，该控制器也处理例如登录和注销。

如何在Angular应用程序中单击任何链接时隐藏Bootstrap导航栏下拉菜单？

1 个答案: