<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery练习之左侧菜单栏</title> <style> .menu{ height: 300px; width: 30%; background-color: gainsboro; float: left; /*设置左侧菜单栏高500px，宽占屏幕30%，向左浮动*/ } .content{ height: 300px; width: 70%; background-color: yellow; float: left; /*设置内容文本框高500px，宽占屏幕70%，向左浮动贴着菜单栏*/ } .title{ line-height: 50px; background-color: red; color: forestgreen; /*设置菜单样式*/ } .hide{ display: none; /*将菜单的子菜单隐藏起来*/ } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content">内容文本区域</div> </div> <script src="jquery-3.3.1.js"></script> <script> $('.item .title').click(function () { $(this).next().removeClass('hide'); $(this).parent().siblings().children('.con').addClass('hide'); }); </script> </body> </html>