Angularjs 有两个对应于侧栏和导航栏的折叠按钮，一次只希望展开一个

我有一个带有

侧栏

菜单和一些

导航栏

下拉菜单的web应用程序。当

@媒体屏幕和（最大宽度：768px）

时，

侧栏

折叠成

导航栏左侧的按钮

；

navbar

按钮折叠到

navbar

上的右侧

我一次只想打开一个。如果打开另一个，则关闭另一个。此外，如果在下拉列表外单击也关闭，那就太好了

侧栏.directive.js

angular.module('sideBar').
    directive('sideBar', function($cookies, $location){
        return {    
            restrict: 'E',
            templateUrl: '/api/templates/sidebar.html',
            link: function (scope, element, attr){
                scope.userLoggedIn = false
                scope.$watch(function(){
                    var token = $cookies.get('token')
                    if (token) {
                        scope.userLoggedIn = true
                    } else {
                        scope.userLoggedIn = false
                    }
                scope.isNavCollapsedSideBar = true;

                })

            }
        }
    });

angular.module('cronNav').
    directive('cronNav', function($cookies, $location){
        return {    
            restrict: 'E',
            templateUrl: '/api/templates/navbar.html',
            link: function (scope, element, attr){
                scope.userLoggedIn = false
                scope.$watch(function(){
                    var token = $cookies.get('token')
                    if (token) {
                        scope.userLoggedIn = true
                    } else {
                        scope.userLoggedIn = false
                    }
                scope.isNavCollapsedNav = true;

                })      
            }
        }
    });

navbar.directive.js

angular.module('sideBar').
    directive('sideBar', function($cookies, $location){
        return {    
            restrict: 'E',
            templateUrl: '/api/templates/sidebar.html',
            link: function (scope, element, attr){
                scope.userLoggedIn = false
                scope.$watch(function(){
                    var token = $cookies.get('token')
                    if (token) {
                        scope.userLoggedIn = true
                    } else {
                        scope.userLoggedIn = false
                    }
                scope.isNavCollapsedSideBar = true;

                })

            }
        }
    });

angular.module('cronNav').
    directive('cronNav', function($cookies, $location){
        return {    
            restrict: 'E',
            templateUrl: '/api/templates/navbar.html',
            link: function (scope, element, attr){
                scope.userLoggedIn = false
                scope.$watch(function(){
                    var token = $cookies.get('token')
                    if (token) {
                        scope.userLoggedIn = true
                    } else {
                        scope.userLoggedIn = false
                    }
                scope.isNavCollapsedNav = true;

                })      
            }
        }
    });

navbar.html

<nav class='navbar navbar-inverse navbar-fixed-top' ng-show='userLoggedIn'>
    <div class='container-fluid'>

        <!-- Logo on the left of navbar  -->
        <div class='navbar-header'>
            <img src='{{ "./static/media/Trans_Small.png" }}' alt='The Company Logo' height="45">

            <!-- The actual hamburger everything is collapsed into -->
            <button type='button' class='navbar-toggle pull-left' ng-click='isNavCollapsedSideBar = !isNavCollapsedSideBar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>   
        </div>

            <!-- The actual hamburger everything is collapsed into -->
            <button type='button' class='navbar-toggle pull-right' ng-click='isNavCollapsedNav = !isNavCollapsedNav'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>   
        </div>

        <!-- Collapse all links and icons into the hamburger -->
        <div class='collapse navbar-collapse' uib-collapse='isNavCollapsedNav'>
            <ul class='nav navbar-nav navbar-right'>

                <!-- Search button -->
                <form class='navbar-form navbar-left'>
                    <div class='input-group custom-search-form'>
                        <input type='text' class='form-control' placeholder='Search'>
                        <span class='input-group-btn'>
                        <button class='btn btn-default' type='button'>
                        <i class='glyphicon glyphicon-search' title='Search'>
                        </i>
                    </div>
                </form>

                <!-- Home link showing  -->
                <li uib-dropdown>
                    <a href='' id='simple-dropdown' uib-dropdown-toggle><i class='pull-right hidden-xs glyphicon glyphicon-home' title='Home'></i></a>
                    <ul class='center-menu cron-nav' uib-dropdown-menu>
                        <li><h5>Home</h5></li>
                        <li class='divider'></li>
                        <li><a href='#'>Stuff 1</a></li>
                        <li><a href='#'>Stuff 2</a></li>
                    </ul>
                </li>               

            </ul>
        </div>

    </div>
</nav>

<nav class='navbar navbar-inverse sidebar' role='navigation' ng-show='userLoggedIn'>
    <div class='container-fluid'>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class='collapse navbar-collapse' uib-collapse='isNavCollapsedSideBar'>
            <ul class='nav navbar-nav'>

                <!-- Original side bar before AngularJS -->
                <li uib-dropdown class='top-item' auto-close='disabled' is-open='status.openA'>
                    <a href='' uib-dropdown-toggle>Client Information <i class='chev glyphicon' ng-class='{"glyphicon-chevron-up": status.openA, "glyphicon-chevron-down": !status.openA}'></i><i class='pull-right hidden-xs fa fa-user-circle-o'></i></a>

                    <ul class='cron-side' uib-dropdown-menu>

                        <li><h5>General Information</h5></li>
                        <hr>
                        <li><a href='#'>View / Edit<i class='pull-right hidden-xs glyphicon glyphicon-edit'></i></a></li>

                        <li><h5>Assesment</h5></li>
                        <hr>
                        <li><a href='#'>View<i class='pull-right hidden-xs glyphicon glyphicon-eye-open'></i></a></li>

                        <hr class='h'>  

                    </ul>
                </li>           

            </ul>
        </div>
    </div>
</nav>

切换导航
切换导航



家

sidebar.html

<nav class='navbar navbar-inverse navbar-fixed-top' ng-show='userLoggedIn'>
    <div class='container-fluid'>

        <!-- Logo on the left of navbar  -->
        <div class='navbar-header'>
            <img src='{{ "./static/media/Trans_Small.png" }}' alt='The Company Logo' height="45">

            <!-- The actual hamburger everything is collapsed into -->
            <button type='button' class='navbar-toggle pull-left' ng-click='isNavCollapsedSideBar = !isNavCollapsedSideBar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>   
        </div>

            <!-- The actual hamburger everything is collapsed into -->
            <button type='button' class='navbar-toggle pull-right' ng-click='isNavCollapsedNav = !isNavCollapsedNav'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>   
        </div>

        <!-- Collapse all links and icons into the hamburger -->
        <div class='collapse navbar-collapse' uib-collapse='isNavCollapsedNav'>
            <ul class='nav navbar-nav navbar-right'>

                <!-- Search button -->
                <form class='navbar-form navbar-left'>
                    <div class='input-group custom-search-form'>
                        <input type='text' class='form-control' placeholder='Search'>
                        <span class='input-group-btn'>
                        <button class='btn btn-default' type='button'>
                        <i class='glyphicon glyphicon-search' title='Search'>
                        </i>
                    </div>
                </form>

                <!-- Home link showing  -->
                <li uib-dropdown>
                    <a href='' id='simple-dropdown' uib-dropdown-toggle><i class='pull-right hidden-xs glyphicon glyphicon-home' title='Home'></i></a>
                    <ul class='center-menu cron-nav' uib-dropdown-menu>
                        <li><h5>Home</h5></li>
                        <li class='divider'></li>
                        <li><a href='#'>Stuff 1</a></li>
                        <li><a href='#'>Stuff 2</a></li>
                    </ul>
                </li>               

            </ul>
        </div>

    </div>
</nav>

<nav class='navbar navbar-inverse sidebar' role='navigation' ng-show='userLoggedIn'>
    <div class='container-fluid'>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class='collapse navbar-collapse' uib-collapse='isNavCollapsedSideBar'>
            <ul class='nav navbar-nav'>

                <!-- Original side bar before AngularJS -->
                <li uib-dropdown class='top-item' auto-close='disabled' is-open='status.openA'>
                    <a href='' uib-dropdown-toggle>Client Information <i class='chev glyphicon' ng-class='{"glyphicon-chevron-up": status.openA, "glyphicon-chevron-down": !status.openA}'></i><i class='pull-right hidden-xs fa fa-user-circle-o'></i></a>

                    <ul class='cron-side' uib-dropdown-menu>

                        <li><h5>General Information</h5></li>
                        <hr>
                        <li><a href='#'>View / Edit<i class='pull-right hidden-xs glyphicon glyphicon-edit'></i></a></li>

                        <li><h5>Assesment</h5></li>
                        <hr>
                        <li><a href='#'>View<i class='pull-right hidden-xs glyphicon glyphicon-eye-open'></i></a></li>

                        <hr class='h'>  

                    </ul>
                </li>           

            </ul>
        </div>
    </div>
</nav>

一般资料


评估

注意：创建一个本地版本并将其复制到索引中，首先打开整个页面的窗口，了解在响应模式下会发生什么

别忘了：

切换导航

请看一看。它简单又灵活