<!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> /* 通过另一种方式绑定: 用click()--->则会在前端的所有对象中绑定一个事件 */ $('.header').click(function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html> <!-- .next() # 下一个兄弟标签 .prev() # 上一个兄弟标签 .parent() # 父级标签 .children() # 所有的孩子标签 .siblings() # 所有兄弟标签 .find() # 查找标签
py18_08：jquery实现内容伸缩框的小案例
猜你喜欢
转载自www.cnblogs.com/yeyu1314/p/12671393.html
今日推荐
周排行