左边栏实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.2.1.min.js"></script> 6 <style> 7 .hide{ 8 display: none; 9 } 10 11 .container{ 12 width:300px; 13 height: 600px; 14 background-color: #ddd; 15 border: 1px solid #999; 16 } 17 18 .container .title{ 19 height: 38px; 20 font-size: 28px; 21 line-height: 38px; 22 background-color: orange; 23 cursor: pointer; 24 } 25 26 .container .body{ 27 background-color:white; 28 } 29 30 .container .body a{ 31 display:block; 32 padding: 10px; 33 } 34 </style> 35 <title>Title</title> 36 </head> 37 <body> 38 <div class='container'> 39 <div> 40 <div class='title' onclick="Dis(this);">Menu1</div> 41 <div class='body'> 42 <a href="">content1</a> 43 <a href="">content2</a> 44 <a href="">content3</a> 45 </div> 46 </div> 47 48 <div> 49 <div class='title' onclick="Dis(this);">Menu2</div> 50 <div class='body hide'> 51 <a href="">content1</a> 52 <a href="">content2</a> 53 <a href="">content3</a> 54 </div> 55 </div> 56 57 <div> 58 <div class='title' onclick="Dis(this);">Menu3</div> 59 <div class='body hide'> 60 <a href="">content1</a> 61 <a href="">content2</a> 62 <a href="">content3</a> 63 </div> 64 </div> 65 66 <div> 67 <div class='title'onclick="Dis(this);">Menu4</div> 68 <div class='body hide'> 69 <a href="">content1</a> 70 <a href="">content2</a> 71 <a href="">content3</a> 72 </div> 73 </div> 74 75 <div> 76 <div class='title' onclick="Dis(this);">Menu5</div> 77 <div class='body hide'> 78 <a href="">content1</a> 79 <a href="">content2</a> 80 <a href="">content3</a> 81 </div> 82 </div> 83 84 </div> 85 <script type="text/javascript"> 86 function Dis(ths){ 87 $(ths).next().removeClass('hide'); 88 $(ths).parent().siblings().find('.body').addClass('hide'); 89 90 } 91 </script> 92 </body> 93 </html>