在移动模式下导航（链接单击）时折叠导航栏答案

【问题标题】：Collapse navbar on navigate (link click) in mobile mode在移动模式下导航（链接单击）时折叠导航栏
【发布时间】：2015-05-28 08:24:06
【问题描述】：

我正在使用带角度的引导程序 3。当我点击一个链接时，页面没有重新加载，导致菜单在移动模式下保持打开状态。

如何在我点击菜单项时自动关闭菜单？

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

【问题讨论】：

标签： twitter-bootstrap angularjs

【解决方案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>

【讨论】：

【解决方案2】：

这是我最终使用的角度指令。有几件事需要注意。

在桌面模式下不要折叠菜单（查找 overflow-y == auto）
在调整窗口大小时处理菜单状态，打开的菜单会在窗口增大时关闭。

我在具有导航类的元素上使用 ic-nav-autoclose 指令。

angular.module('incmn')
    .directive('icNavAutoclose', function () {
        console.log("icNavAutoclose");
        return function (scope, elm, attrs) {
            var collapsible = $(elm).find(".navbar-collapse");
            var visible = false;

            collapsible.on("show.bs.collapse", function () {
                visible = true;
            });

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

            $(elm).find("a").each(function (index, element) {
                $(element).click(function (e) {
                    if (visible && "auto" == collapsible.css("overflow-y")) {
                        collapsible.collapse("hide");
                    }
                });
            });
        }
    });

【讨论】：

不错。我一直在寻找与此相关的东西。
太棒了。为什么我们不直接向 navbar-collabse 添加指令而不是父元素。所以我们可以避免额外的jquery查找。
以防万一其他人在单页应用程序中更改页面后出现菜单折叠的问题，此链接显示如何在路由完成后更改“isCollapsed”变量照顾：pointblankdevelopment.com.au/blog/…

【解决方案3】：

我已经这样做了。

$(selector).click(function () {
  //for close, opened dropdown.
  if ($("nav").hasClass("in")) {
    $('[data-toggle="collapse"]').click();
  }
});

【讨论】：

【解决方案4】：

如果您希望导航栏在下次单击后折叠，无论它出现在屏幕的哪个位置：

让您的.navbar-toggle 按钮只打开导航：

<div class="navbar-header">
    <button class="navbar-toggle" ng-click="collapsed = true">
</div>

在.navbar-collapse 后面附加一个不可见的全屏背景，单击该背景会关闭导航：

.invisible-underlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

<div class="navbar-collapse" collapse="navbarCollapsed" ng-click="navbarCollapsed = true">
    <div class="invisible-underlay"></div>
    <ul class="nav navbar-nav navbar-right">
        <li><a ui-sref="home">Home</a></li>
    </ul>
</div>

【讨论】：

【解决方案5】：

此代码适用于导航栏中的下拉菜单

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') && $(event.target).attr('data-toggle')!="dropdown") {
                    element.collapse('hide');
                }
            });
        }
    };
});

【讨论】：