twitter-bootstrap - 在移动模式下导航(链接单击)时折叠导航栏

标签 twitter-bootstrap angularjs

我正在使用带 Angular 的 Bootstrap 3。当我单击链接时,页面不会重新加载,导致菜单在移动模式下保持打开状态。

单击菜单项时如何使菜单自动关闭?

我试过只添加 data-toggle="collapse" data-target=".navbar-responsive-collapse"a标签,但它会在桌面模式下导致奇怪的行为。

最佳答案

这只是先前答案的更新版本

angular.module('app').directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function(event) {
                if (visible && 'auto' == element.css('overflow-y')) {
                    element.collapse('hide');
                }
            });
        }
    };
});

HTML
    <div class="collapse navbar-collapse navbar-app-collapse" nav-collapse="">
        <ul class="nav navbar-nav">

        </ul>
    </div>

关于twitter-bootstrap - 在移动模式下导航(链接单击)时折叠导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18324157/

相关文章:

angularjs - 将 forerunnerDb 引导到 angular-electron 应用程序中

javascript - 单独的 AngularJS Controller 导致错误

javascript - 仅在移动设备上将输入设置为只读

css - 具有固定大小和滚动条的 Bootstrap 缩略图

html - Bootstrap - 更改已访问链接的颜色

javascript - 在 angularjs 中,我如何访问 formController?

angularjs - 如何使用 Angular ui-router 设置默认状态

javascript - 带 Ui-bootstrap 的周选择器

html - Bootstrap 网格方案垂直对齐两个 col-md

c# - MVC 内容文件夹问题 - 未找到 Twitter Bootstrap 样式表