<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: #35ff24; color: red; } .content{ min-height: 50px; background-color: #2459a2; } .hide{ display: none; } </style> </head> <body> <div style="height: 400px;width: 200px;border: 1px solid red;background-color: #2459a2"> <div class="item"> <div class="header">标题1</div> <div class="content">内容</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> / * Bind in another way: using click () ---> will bind an event to all objects in the front end * / $ ( ' .header ' ) .click (function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html> <-! .Next () # next sibling label .prev () # a Brother label on .parent () # parent label .children () # All the kids label .siblings () # All Brothers label .find ( ) # Find label