jQuery--左侧菜单收缩隐藏
实现步骤：
步骤一、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style></head><body> <div> <div> <div id="m1" onclick="Change(1);">菜单一</div> <div> <div>1.1</div> <div>1.2</div> <div>1.3</div> </div> </div> <div> <div id="m2" onclick="Change(2);">菜单二</div> <div> <div>2.1</div> <div>2.2</div> <div>2.3</div> </div> </div> <div> <div id="m3" onclick="Change(3);">菜单三</div> <div> <div>3.1</div> <div>3.2</div> <div>3.3</div> </div> </div> </div> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> function Change(arg){ //找到，点击的哪一个？ if(arg==1){ var menu=$('#m1') }else if(arg==2){ var menu=$('#m2') }else{ var menu=$('#m3') } console.log(menu.text()) } </script></body></html> |
步骤二、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style></head><body> <div> <div> <div onclick="Change(this);">菜单一</div> <div class="content"> <div>1.1</div> <div>1.2</div> <div>1.3</div> </div> </div> <div> <div onclick="Change(this);">菜单二</div> <div class="content hide"> <div>2.1</div> <div>2.2</div> <div>2.3</div> </div> </div> <div> <div onclick="Change(this);">菜单三</div> <div class="content hide"> <div>3.1</div> <div>3.2</div> <div>3.3</div> </div> </div> </div> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> function Change(arg){ //找到，点击的哪一个？ //var t= $(arg).text(); //console.log(t); //$(arg)表示当前点击的标签 //一、找到下一个标签，移除hide //$(arg).next()下一个标签 //removeClaass('') $(arg).next().removeClass('hide'); //二、找到其他菜单，内容隐藏，添加hide //当前标签的父标签 $(arg).parent() //所有父标签的兄弟标签 $(arg).parent().siblings() //所有兄弟标签下的content样式的标签，添加hide样式 $(arg).parent().siblings().find('.content').addClass('hide'); } </script></body></html> |
效果：
