侧边栏改成图标样式
需求如下：
将左侧的菜单样式改成右侧的样式，页面左下角有一个箭头，可以来回切换。
首先，先找到代码，将箭头添加上，样式也要相应的加上，接下来就是绑定点击事件。
我的思路是：写上两套不同的css，然后来回切换的时候只要更改类名就可以了，下面附上我做的过程。
1、在index.html中添加<span class="arrow" onclick=”arrowClick()”>></span>下方箭头部分；在app.css中加入箭头样式。
/*菜单栏的箭头*/
1 .arrow { 2 3 display: inline-block; 4 5 width: 40px; 6 7 height:40px; 8 9 background-color: #000; 10 11 border-radius: 8px; 12 13 font-size:20px; 14 15 color:#fff; 16 17 line-height: 40px; 18 19 text-align: center; 20 21 position: fixed; 22 23 bottom: 50px; 24 25 left:10px; 26 27 cursor:pointer; 28 29 }
2、在app.js中给箭头加上点击事件
1 function arrowClick(){ 2 3 if($('.arrow').text()=='<'){ 4 5 $('.arrow').text('>'); 6 7 // 缩成图标 8 9 $('.sidebar-header h1').css('display','none');//隐藏头部标题 10 11 $('#sidebar').css('width','55px'); 12 13 $('#nav_menu_list').removeClass('sidebar-menu').addClass('menu'); 14 15 $('#nav_menu_list > ul').css('width','55px'); 16 17 $('#content').css('marginLeft','55px'); 18 19 $('#nav_menu_list > ul > li').css('hight','55px'); 20 21 $('#nav_menu_list > ul > li > a > span').addClass('spanhide'); 22 23 $('#nav_menu_list > ul > li i').css({'fontSize':'25px','color':'#fff'}); 24 25 $('.menu > ul > li').each(function(index){ 26 27 $(this).unbind('click'); 28 29 $(this).mouseover(function(e) { 30 31 e.preventDefault(); 32 33 $(this).css('position','relative'); 34 35 $(this).find('ul').addClass('menu_ul').css('display','block'); 36 37 }); 38 39 $(this).mouseout(function() { 40 41 $(this).find('ul').removeClass('menu_ul').css('display','none'); 42 43 }); 44 45 }) 46 47 }else{ 48 49 $('.arrow').text('<'); 50 51 $('.sidebar-header h1').css('display','block'); 52 53 $('#sidebar').css('width','180px'); 54 55 $('#nav_menu_list > ul').css('width','180px'); 56 57 $('#nav_menu_list').removeClass('menu').addClass('sidebar-menu'); 58 59 $('#content').css('marginLeft','180px'); 60 61 $('#nav_menu_list > ul > li > a > span').removeClass('spanhide'); 62 63 $('#nav_menu_list > ul > li').css('hight','0px'); 64 65 $('#nav_menu_list > ul > li i').css({'fontSize':'12px','color':'#939da8'}); 66 67 $('.sidebar-menu > ul > li').unbind('mouseover');//解绑之前绑定的移入移出事件 68 69 $('.sidebar-menu > ul > li').unbind('mouseout'); 70 71 72 73 } 74 75 }