Fatal编程技术网
  • angularjs/
  • Angularjs 在Angular应用程序中单击任何链接时，如何隐藏引导导航栏下拉菜单？

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

angularjs twitter-bootstrap-3

Angularjs 在Angular应用程序中单击任何链接时，如何隐藏引导导航栏下拉菜单？,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,在窄屏幕上，引导导航栏显示为覆盖页面内容的按钮面板。有许多问题和答案解决了当点击面板时隐藏面板的问题-这不是我试图解决的问题 这个问题是，当点击页面主体中的链接时，如何隐藏面板，以及当这些链接由AngularJs模板生成时，如何隐藏面板。有简单的解决办法吗 以下是Angular插入内容的主页的相关内容： <html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="eepApp" ng-control

在窄屏幕上，引导导航栏显示为覆盖页面内容的按钮面板。有许多问题和答案解决了当点击面板时隐藏面板的问题-这不是我试图解决的问题

这个问题是，当点击页面主体中的链接时，如何隐藏面板，以及当这些链接由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>


...
切换导航

    
...

      
...

    
...
//单击项时隐藏导航栏菜单
$（文档）.on（'click'，'）。导航栏collapse.in'，函数（e）{
if（$（e.target）.is（'a'）| |$（e.target）.parent（）.is（'a'））{
$（this.collapse（'hide'）；
}
});
我采用了这种方法，当页面更改时，使用jQuery删除保持导航栏菜单打开（称为“in”）的类：

$scope.$on('$routeChangeStart', function() {
    // Close navbar menu (if open) by removing the class that makes it visible
    $('#navbar-collapse-id').removeClass('in');
});
这将添加到整个应用程序控制器中，该控制器还可以处理登录和注销等操作。

您能更具体一些吗？提供一些代码来演示您所拥有的。@Skelly我已经添加了主页的一个精简版本。问题是如何获取Angular插入的内容，以便在单击内容中的任何链接时关闭引导菜单。页面中已有的on（“click”）JavaScript仅在单击菜单上的链接时关闭菜单。