首页 > 代码库 > jquery 点击查看,收起特效
jquery 点击查看,收起特效
<div class="all"> <p><a href="javascript:;" id="onvk">点击查看</a></p> <div class="tedg" style="background: gainsboro; height: 300px;"> </div> </div>
<style> *{ margin:0px; padding:0px; } .all{width:200px;position: fixed; bottom: 20px; left:40%;} .all p{width:200px; height:40px; border-radius:5px; border:1px solid #333;} .all p a{ float:right; width:70px; height:40px; line-height:40px; display:block; } .tedg{width:200px; border:1px solid #333; height:200px; display:none;}</style>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script><script> $(function(){ $(‘#onvk‘).click(function(){ if($(this).text()==‘点击查看‘){ $(this).text(‘收起‘) }else{ $(this).text(‘点击查看‘) } $(this).parents(‘p‘).siblings(‘.tedg‘).stop().slideToggle(); /*找到#onvk的所有是p元素的祖先元素,.tedg的同辈元素,停止高度的变化*/ }) })</script>
jquery 点击查看,收起特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。