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 class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">

表示导航栏会在您点击它的任何地方关闭，而不仅仅是在标签上。

这是一个在点击“管理”功能时不会折叠导航栏的版本。 - Fiddle

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

新的activateTab：

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

单击下拉切换时，Navbar折叠正在关闭

1 个答案: