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

Question

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

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

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

Answer 1

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

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>