angular4自适应navbar

说明

这个navbar是练习的时候做的最初版本，根据浏览器宽度来自动一个一个收缩navbar的标签，里面有许多不足之处 ，请各位大神多多指教。

---

完成图

插件

所用插件为 JQ,BOOTSTRAP,fontawesome

navbar组件

navbar.component.ts
通过本地数组对navbar标签提供数据，通过JQ控制显示隐藏

import {AfterViewInit, Component, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit, AfterViewInit {

  // navbar标签数组
  private arrs: Array<any> = [
    { 'name': 'File', 'detaill': ['Chnage Password', 'Log Off'] },
    { 'name': 'View', 'detaill': ['Navigation', 'To-Do Bar', 'Page Information', 'Group Information']},
    { 'name': 'Roles', 'detaill': ['HIMS Case Management', 'Head Start']},
    { 'name': 'Schedule'},
    { 'name': 'Report', 'detaill': ['General Report', 'Ad Hoc Reports', 'Ad Hoc Report Designer']},
    { 'name': 'Dashboard'},
    { 'name': 'Wizard', 'detaill': ['Wizard1', 'Exit Wizard Mode']},
    { 'name': 'Ticket'},
    { 'name': 'About'},
    { 'name': 'Messages'},
    { 'name': 'More', 'detaill': []},
  ]


  constructor() {
  }

  ngOnInit() {

  }

  ngAfterViewInit(): void {
    // 导航栏右侧和下拉菜单控制
    $(function() {
      let Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        let links = this.el.find('.link');
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
      };

      Accordion.prototype.dropdown = function(e) {
        let $el = e.data.el;
        let $this = $(this);
        let $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
          $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        }
      };

      let accordion = new Accordion($('#accordion'), false);
      $('.submenu li').click(function () {
        $(this).addClass('current').siblings('li').removeClass('current');
      });

      $('.navshow>li:not(:last-child)').mouseover(function () {
          $(this).children('div').removeClass('hidden');
      });

      $('.navshow>li:not(:last-child)').mouseout(function () {
        $(this).children('div').addClass('hidden');
      });

      $('.navshow>li:last-child').mouseover(function () {
        $('.whiteselectall').css('display', 'block');
      });

      $('.navshow>li:last-child').mouseout(function () {
        $('.whiteselectall').css('display', 'none');
      });
      returnfunc();
    });

    // 渲染navbar标签出现隐藏
    // 记录隐藏（出现）标签的数量
    let counts = 1;
    // 标签数组长度
    const arrleng = this.arrs.length;
    // 更改浏览器宽度触发
    window.onresize = function(){
      returnfunc();
    };
    // 多次执行修正出现的标签数量
    function returnfunc() {
      let flag1 = true;
      let flag2 = true;
      while ( flag1 || flag2) {
        changli();
        const winWidth = $(document.body).width();
        const leftwidth = $('.menuTitle').width();
        const rightwidth = $('.containerall .pull-right').width();
        flag1 = winWidth - 20 <= leftwidth + rightwidth && counts < arrleng;
        flag2 = winWidth - 250 > leftwidth + rightwidth && counts > 1;
      }
    }
    // 显示或隐藏标签
    function changli() {
      const winWidth = $(document.body).width();
      const leftwidth = $('.menuTitle').width();
      const rightwidth = $('.containerall .pull-right').width();
      // 隐藏
      if (winWidth - 20 <= leftwidth + rightwidth && counts < arrleng) {
        if ($('.navshow>li:last-child').css('display') == 'none') {
          $('.navshow>li:last-child').css('display', 'block');
        }
        $('.navshow>li:nth-last-child(' + (counts + 1) + ')').css('display', 'none');
        $('.whiteselectall>div>ul>li:nth-last-child(' + (counts + 1) + ')').css('display', 'block');
        counts++;
      }
      // 显示
      if (winWidth - 250 > leftwidth + rightwidth && counts > 1) {
        if ($('.navshow>li:last-child').css('display') == 'block' && counts == 2) {
          $('.navshow>li:last-child').css('display', 'none');
          $('.navshow>li:nth-last-child(' + (counts) + ')').css('display', 'block');
        }
        $('.navshow>li:nth-last-child(' + (counts + 1) + ')').css('display', 'block');
        $('.whiteselectall>div>ul>li:nth-last-child(' + (counts + 1) + ')').css('display', 'none');
        counts--;
      }
    }



  }

}

navbar.component.html

<div class="row containerall">
 <div class="col-md-12">
   <!--前半部分-->
   <div class="menuTitle" role="banner">
     <div style="float: left;">
       <span class="glyphicon glyphicon-menu-hamburger visible-xs visible-sm" style="line-height: 37px;cursor:pointer"></span>
     </div>
     <div style="float: left;margin-left: 4px;">ENGINUITY v7.0.0</div>
   </div>
<!--右边-->
   <div class="pull-right" style="margin:0;padding:0;">
    <ul class="navshow navbar-nav">
      <li *ngFor="let i of arrs; let index=index"   >
        <span class="lishow">
          {{i.name}}
           <span *ngIf="i.detaill != null">
            <span class="caret"></span>
            </span>

             <span *ngIf="i.name == 'Messages'">
              <span class="badge">50</span>
             </span>
        </span>

         <div class="hidden"  *ngIf="i.detaill != null">
           <ul class="inli">
             <li *ngFor="let j of i.detaill">
               <a href="#"><span class="fa fa-sign-out"></span>{{j}}</a>
             </li>
           </ul>
         </div>

        <div *ngIf="i.name == 'More'" class="whiteselectall">

          <div class="account-l fl">

            <ul id="accordion" class="accordion">
              <li *ngFor="let arr of arrs">
                <div class="link"><i></i>{{arr.name}}
                  <i *ngIf="arr.detaill != null" class="fa fa-chevron-down"></i>
                  <!--<span *ngIf="arr.detaill != null" class="caret showdown"></span>-->
                </div>
                <ul class="submenu">
                  <li *ngFor="let i of arr.detaill"><a>{{i}}</a></li>
                </ul>
              </li>
            </ul>

          </div>


        </div>

      </li>
    </ul>

   </div>


 </div>
</div>





<div style="width: 100%;height: 800px">

</div>

navbar.component.css

*{
  margin: 0;
  padding: 0;
}
.containerall{
  background-color: #428bca;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}
.menuTitle{
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  float: left;
}
.navshow{
  list-style: none;
  background-image: none;
  background-color: #428bca;
  vertical-align: bottom;
  border-style: none;
}
.navshow>li {
  float: left;
  vertical-align: top;
  zoom: 1;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  text-align: -webkit-match-parent;
}
.inli{
  position: absolute;
  display: block;
  max-height: 332px;
  overflow: auto;
  position: absolute;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-color: white;
  border: 1px solid rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 63, .25);
  box-shadow: 0 3px 8px rgba(0, 0, 63, .25);
  overflow: hidden;
  top: 40px;

}
.inli a{
  text-decoration: none;
  color: #333333;
}
.whiteselectall{
  position: absolute;
  right: 2px;
  display: none;
}
.inli>li{
  vertical-align: top;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  text-align: -webkit-match-parent;
  line-height: 20px;
  font-weight: 400;
  padding: 5px;
}
.lishow{
  display: block;
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 40px;
}
.navshow>li:last-child{
  display: none;
}
.whiteselectall>div>ul>li{
  display: none;
}
.showdown{
  position: absolute;
  right: 12px;
  left: auto;
  top: 12px;
  transition: all 0.4s ease;
}
.navshow>li:hover{
  background-color:#327bba;
}
.whiteselectall>div>ul>li:hover {
  background-color:#eeeeee;
}
.whiteselectall a{
  text-decoration: none;
}
.inli>li:hover{
  background-color:#eeeeee;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
ul{
  list-style: none;
}
a{
    text-decoration: none;
}



/** =======================
 * Contenedor Principal
 ===========================*/
.list-title{
    display: inline-block;
    width: 100%;
    max-width: 200px;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    background: #FFF;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #428bca;
    font-weight: bold;
    cursor: pointer;
}
h1 {
    color: #FFF;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-top: 80px;
}

h1 a {
    color: #428bca;
    font-size: 16px;
}

.accordion {
    width: 100%;
    max-width: 200px;
    border: solid 1px #ccc;
    background: #FFF;
}

.accordion .link {
    cursor: pointer;
    display: block;
    padding: 5px 5px 5px 16px;
    color: #4D4D4D;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li:last-child .link {
    border-bottom: 0;
}
.accordion li{
    cursor: pointer;
}
.accordion li i {
    position: absolute;
    top: 3px;
    left: 12px;
    font-size: 12px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 12px;
}

.accordion li.open .link {
    color: #428bca;
}

.accordion li.open i {
    color: #428bca;
}

.accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/
.submenu {
    display: none;
    background: #f5f5f5;
    font-size: 12px;
}

.submenu li {
    border-bottom: 1px solid #d6d7dc;
}

.submenu a {
    display: block;
    text-decoration: none;
    color: #666;
    padding: 12px;
    padding-left: 10px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.submenu a:hover ,.submenu li.current a{
    background: #428bca;
    color: #FFF;
}


.whiteselectall{
  position: absolute;
  top:40px;
  right: 0px;
  width: 130px;
  height: 360px;
  z-index: 100;
}
.whiteselectall .k-menu .k-item, .whiteselectall.k-widget.k-menu-horizontal>.k-item{
  /*clear: both;*/
  float: none;
}