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

Question

我有一个带有 sidebar 菜单和一些 navbar 下拉菜单的网络应用程序。当 @media screen and (max-width: 768px) 时，sidebar 折叠成 navbar 左侧的按钮； navbar 按钮折叠到 navbar 的右侧。

我只想一次能打开一个。如果另一个打开，它会关闭另一个。另外，如果在下拉菜单外单击也能关闭，那就太好了。

sidebar.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;

                })

            }
        }
    });

navbar.directive.js

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>

sidebar.html

<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>

Answer 1

Note: create a local version and copy it in your index, first open window in full-page to figure out what will happen in responsive mode

Do not Forget:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
目标： 当 window 宽度小于 768px 时，在主导航中加入侧边栏菜单（基于 bootstrap 框架响应）

描述：在这个示例中我们需要标准bootstrap导航栏和折叠模式，但是在侧边栏我们不需要这个模式因为它会隐藏（通过".hidden-xs")后window宽度小于768px，然后通过我们的指令(joinNav)就可以加入如您所见，主导航栏中的侧边栏。

特点：

单击一次折叠即可处理所有侧边栏导航

在折叠模式下点击关闭导航

在主导航中加入所有导航

var app = angular.module("app", []);

app.directive('joinNav', function () {
            return {
                restrict: 'A',
                scope: {
                    sidebarHanlder: "@"
                },
                link: function (scope, element) {
                    //you can change it
                    var navMain = "#bs-example-navbar-collapse-1";
                    var sidbarNav = ".sidebar";

                    element.addClass(scope.sidebarHanlder);
                    //on window start
                    var startWindowWidth = $(window).width();

                    if (startWindowWidth <= 767) {
                        element.appendTo(navMain);
                    } else {
                        element.appendTo(sidbarNav);
                    }

                    //on window resize
                    $(window).resize(function (data) {
                        if (data.target.innerWidth <= 767) {
                            element.appendTo("#bs-example-navbar-collapse-1");
                        } else {
                            element.appendTo(".sidebar");
                        }
                    });

                    ////hanlde hide on click nav
                    if (!$("li.dropdown").data('clicked')) {
                        $(document).click(function (event) {
                            var clickover = $(event.target);
                            var $navbar = $(".navbar-collapse");
                            var _opened = $navbar.hasClass("in");
                            if (_opened === true && !clickover.hasClass("navbar-toggle")) {
                                $navbar.collapse('hide');
                            }
                        });
                    }
                }
            }
        });

.sidebar,
        .sidebar .collapse {
            margin: 0;
            padding: 0;
        }

            .sidebar ul,
            .sidebar li {
                width: 100%;
                clear: both;
                margin: 0;
                padding: 0;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div ng-app="app">
<nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div class="col-lg-3 col-md-3 col-sm-6 hidden-xs">
        <nav class="navbar navbar-default sidebar">
            <ul class="nav navbar-nav" join-nav="navbar-sidbar">
                <li><a href="#">Link 2</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 2 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

Answer 2

请看angular-sidebar。它简单而灵活。

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

Have two collapsed buttons corresponding to sidebar and navbar, want only only one at a time to be expanded

twitter-bootstrap

angularjs

angular-ui-bootstrap