1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .menu{ 8 float: left;width: 30%;height: 500px;background-color: antiquewhite; 9 } 10 .content{ 11 float: left;width: 70%;height: 500px;background-color: blue; 12 } 13 .title{ 14 background-color: black; 15 color: white; 16 height: 50px; 17 line-height: 50px; 18 } 19 .hide{ 20 display: none; 21 } 22 23 </style> 24 </head> 25 <body> 26 <div> 27 <div class="menu"> 28 <div class="item"> 29 <div class="title" onclick="Func(this);">菜单一</div> 30 <div class="body "> 31 <div>1.1</div> 32 <div>1.2</div> 33 <div>1.3</div> 34 </div> 35 </div> 36 <div class="item"> 37 <div class="title"onclick="Func(this);">菜单二</div> 38 <div class="body hide"> 39 <div>2.1</div> 40 <div>2.2</div> 41 <div>2.3</div> 42 </div> 43 </div> 44 <div class="item"> 45 <div class="title"onclick="Func(this);">菜单三</div> 46 <div class="body hide"> 47 <div>3.1</div> 48 <div>3.2</div> 49 <div>3.3</div> 50 </div> 51 </div> 52 53 </div> 54 <div class="content"></div> 55 </div> 56 <script src="jquery-3.2.1.js"></script> 57 <script> 58 function Func(ths) { 59 console.log($(ths).text()); 60 $(ths).next().removeClass(‘hide‘); 61 $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘); 62 63 } 64 </script> 65 </body> 66 </html>
