点击展开，再点闭合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: aquamarine; } .hide{ display: none; } </style> </head> <body> <div style="height: 400px;width: 200px;border: 1px solid red"> <div class="item"> <div class="header">菜单一</div> <div class="content hide">内容一</div> <div class="content hide">内容二</div> </div> <div class="item"> <div class="header">菜单二</div> <div class="content hide">内容一</div> <div class="content hide">内容二</div> </div> <div class="item"> <div class="header">菜单三</div> <div class="content hide">内容一</div> <div class="content hide">内容二</div> </div> </div> <script src="jquery-1.11.3.js"></script> <script> $('.header').click(function () { //$(this).siblings('.content').removeClass('hide'); //取兄弟节点去掉class属性hide var v = $(this).siblings('.content') v.hasClass('hide')? v.removeClass('hide'):v.addClass('hide');//判断样式进行反选 && 三元运算 $(this).parent().siblings().find('.content').addClass('hide') //父节点的兄弟节点，下面找content的节点，去掉hide }) </script> </body> </html>