实现代码如下：
<!-- jquery实现左侧折叠菜单 --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #container{ width:200px; height:500px; border:1px solid red; } .header{ background-color:blue; } .content{ min-height:50px; } .hide{ display:none; } </style> </head> <body> <div id="container"> <div class="item"> <div class="header">菜单1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">菜单2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">菜单3</div> <div class="content hide">内容3</div> </div> <div class="item"> <div class="header">菜单4</div> <div class="content hide">内容4</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ //方式一 全局视图 // $('.content').addClass('hide'); //给所有content添加hide // $(this).next().removeClass('hide'); //给点击对象移除hide //方式二 局部视图 //筛选器的方法next(),prev(),children(),parent(),find(),siblings() // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide'); //方式三 局部视图+链式编程 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); }); </script> </body> </html>