首页 > 代码库 > 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 点击查看,收起特效