单击下拉切换时折叠的导航栏正在关闭答案

【问题标题】：Navbar collapsed is closing while clicking on dropdown-toggle单击下拉切换时折叠的导航栏正在关闭
【发布时间】：2015-01-19 00:01:58
【问题描述】：

当导航栏折叠时，我无法单击下拉菜单上的元素，因为当我单击下拉菜单时，它正在关闭导航栏。我怎样才能避免这种行为？

<nav ng-app="app" ng-controller="AppCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
            <ul class="nav navbar-nav pull-right">
                <li id="home-tab" ng-class="{active : isActive('home-tab')}" ng-click="activateTab('home-tab')" class="tab"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                <li id="stats-tab" ng-class="{active : isActive('stats-tab')}" ng-click="activateTab('stats-tab')" class="tab"><a href="#"><span class="glyphicon glyphicon-stats"></span>Stats</a></li>
                <li id="administration-tab" ng-class="{active : isActive('administration-tab')}" ng-click="activateTab('administration-tab')" class="tab dropdown"><a class="dropdown-toggle"><span class="glyphicon glyphicon-book"></span>Administration<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Terminal</a></li>
                        <li><a href="#">Users</a></li>
                    </ul>
                </li>
                <li id="profile-tab" ng-class="{active : isActive('profile-tab')}" ng-click="activateTab('profile-tab')" class="tab dropdown"><a data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span>Profile<span class="caret"></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Me</a></li>
                        <li><a href="#">Company</a></li>
                    </ul>
                </li>
                <li id="logout-tab" class="tab"><a><span class="glyphicon glyphicon-off"></span>Logout</a></li>
            </ul>
        </div>
    </div>
</nav>

JSFiddle

注意：在 JSFiddle 示例中，当您单击下拉菜单时，它不会展开。我不知道为什么，反正它在我的代码中工作。忘记这一点，看看导致我折叠的导航栏在单击下拉菜单时关闭的问题。 ;)

【问题讨论】：

标签： html angularjs angular-ui-bootstrap

【解决方案1】：

因为你有

ng-click="navCollapsed=true"

在主导航栏 div 上

<div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">

这意味着导航栏会在您单击它的任何位置关闭，而不仅仅是在选项卡上。

这是一个在您单击“管理”时不会折叠导航栏的版本 - Fiddle

<div class="collapse navbar-collapse" collapse="navCollapsed">

新的激活标签：

$scope.activateTab = function(tabId) {
    if (tabId != 'administration-tab') {
        $scope.navCollapsed = true;
    }
    $scope.activeTab = tabId;
};

【讨论】：