1.效果
2.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <style> .wrap { 500px; margin:0 auto; } a { text-decoration: none; } .myGroup { 500px; border: 1px solid #ccc; } .showdiv { 500px; height: 400px; display: none; } .mytitle { display: inline-block; text-align: center; background: #ccc; border-bottom:1px solid $ccc; 500px; height: 30px; line-height: 30px; } </style> </head> <script src="jquery.js"></script> <body> <div class="wrap"> <div class="myGroup"> <span class="mytitle"><a href="#">标题1</a></span> <div class="showdiv"> this is first showdiv </div> </div> <div class="myGroup"> <span class="mytitle"><a href="#">标题2</a></span> <div class="showdiv"> this is second showdiv </div> </div> </div> </body> </html> <script> $(function(){ $(".wrap .mytitle").click(function(){ $(this).next().slideDown(1000); $(this).parent().siblings().children(".showdiv").slideUp(1000); }); }) </script>