js动态生成侧边栏

1.html

<nav class="navbar-default navbar-static-side" role="navigation">
				<div class="sidebar-collapse">
					<ul class="nav metismenu" id="side-menu">
						<li class="nav-header">
							<div class="dropdown profile-element">
								<img alt="image" class="rounded-circle" src="img/头像.jpg" style="width: 45px;height: 45;" />
								<a href="javascript:void(0);">
									<span class="block m-t-xs font-bold" v-if="loginuser">{{loginuser.loginName}}</span>
									<span class="text-muted text-xs block" v-if="loginuser.role">{{loginuser.roleName}}</span>
								</a>
							</div>
							<div class="logo-element">
								Share Sun
							</div>
						</li>
						<!-- 动态添加侧边栏 -->
					</ul>

				</div>
			</nav>

2.js

	//根据当前用户角色展现侧边栏
				getMenuByRole: function() {
					var _this = this;
					$.ajax({
						url: this.projectName + '/menu/getMenuByLoginUser',
						type: 'get',
						dataType: 'json',
						success: function(result) {
							console.log('当前菜单-----', result.data);
							var menulist = result.data;
							var list = $('#side-menu').html();
							menulist.forEach(function(val) {
								if (!val.menuFont) {
									list += '<li  class="sysMan">' +
										'<a class="sysmanager" href="javascript:void(0);" aria-expanded="false"><i class="fa fa-cog" aria-hidden="true"></i><span class="nav-label">系统管理</span><span class="fa arrow"></span></a>' +
										'<ul class="nav nav-second-level collapse" aria-expanded="false"><li><a  href="javascript:void(0);" class="menuUrl' +
										val.id + '">' + val.menuName + '</a></li></ul>' + '</li>';
									$(document).on('click', '.sysmanager', function() {
										if (_this.count % 2 == 0) {
											$('.nav-second-level').removeClass('in');
											$('.sysmanager').prop('aria-expanded', true);
											$('.nav-second-level').prop('aria-expanded', true);
											$('sysMan').addClass('active');
											$('.arrow').css('transform', 'rotate(0deg)'); //正常角度
										} else {
											$('.nav-second-level').addClass('in');
											$('.sysmanager').prop('aria-expanded', false);
											$('.nav-second-level').prop('aria-expanded', false);
											$('sysMan').removeClass('active');
											$('.arrow').css('transform', 'rotate(-90deg)'); //逆时针旋转90度

										}
										_this.count += 1;
									});
									//点击第一层li第二层一定隐藏
									$(document).on('click', '#side-menu>li[class!="sysMan"]', function() {
										$('.nav-second-level').removeClass('in');
										$('.sysmanager').prop('aria-expanded', true);
										$('.nav-second-level').prop('aria-expanded', true);
										$('sysMan').addClass('active');
										$('.arrow').css('transform', 'rotate(0deg)'); //正常角度
										if(_this.count % 2 == 0){
											_this.count += 1;
										}
											
									});


								} else {
									list += '<li><a href="javascript:void(0);" class="menuUrl' + val.id +
										'">'+val.menuFont+'<span class="nav-label">' +
										val.menuName + '</span></a></li>';
								}
								var className = 'menuUrl' + val.id;
								$(document).on('click', '.' + className, function() {
									document.getElementById('main').src = val.menuUrl;
								});
							});
							$('#side-menu').html(list);
							document.getElementById('main').src = menulist[0].menuUrl;
							// $('.menuurl'+menulist[0].id).addClass('active');
						}
					});

				},

			},