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