在移动模式下折叠导航栏(链接点击)

Question

我正在使用带有角度的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>