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

Question

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

<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 示例中，当您单击下拉菜单时，它不会展开。我不知道为什么，无论如何它在我的代码中工作。忘记它并查看导致我在单击下拉菜单时折叠的导航栏关闭的问题。 ;)

Answer 1

因为你有

ng-click="navCollapsed=true"

在主导航栏上 div

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

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

这是一个在您单击 'Administration' 时不会折叠导航栏的版本 - Fiddle

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

新激活标签：

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

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

Navbar collapsed is closing while clicking on dropdown-toggle

html

angularjs

angular-ui-bootstrap