| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Jquery展开关闭内容块效果</title> | |
| <script type="text/javascript" src="jquery-1.5.2.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $(".content").hide(); //隐藏所有主体内容 | |
| $('.s').toggle(function(){ | |
| //选择class为s的元素,并添加toggle方法 | |
| //toggle方法可以切换元素的可见状态,如可见便切换隐藏,反之亦然 | |
| $(this).text('隐藏').parent().nextAll('.content').slideDown(); | |
| //给当前元素添加文本"隐藏",并找到父级元素之后的所有同辈元素.并添加向下展开效果 | |
| },function(){ | |
| $(this).text('展开').parent().nextAll('.content').slideUp(); | |
| //给当前元素添加文本"展开",并找到父级元素之后的所有同辈元素.并添加向上收缩效果 | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .demo .title{ font-size:12px; font-weight:bold; text-indent:10px; line-height:25px; margin-top:2px; background:#ccc; border:2px solid #eee;} | |
| .demo .title span{ float:right; font-size:12px; margin-right:10px; color:#F00; cursor:pointer;} | |
| .demo .content{ font-size:30px; font-weight:bold; text-indent:10px; border:2px solid #eee; border-top:none; padding:10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="demo"> | |
| <div class="title">大家好，我是标题一<span class="s">展开</span></div> | |
| <div class="content">大家好，我是内容一</div> | |
| </div> | |
| <div class="demo"> | |
| <div class="title">大家好，我是标题二<span class="s">展开</span></div> | |
| <div class="content">大家好，我是内容二</div> | |
| </div> | |
| </body> | |
| </html> |
JQuery展开关闭内容块效果
最新推荐文章于 2022-06-17 11:53:10 发布
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
