jquery收缩展开效果实例代码

来源:转载

在jquery中收缩展开效果我们会使用到toggle()方法即可了,下面我来给大家演示两个基于jquery的收缩展开效果代码,希望对大家有所帮助。

主要代码就那点,这个只是个简单的特效,后期可以衍生很多复杂的,前端开发需要大家自己慢慢摸索,多动手,亲们慢慢折腾吧。

 代码如下 复制代码

$(document).ready(function(){

   $(".box h1").toggle(function(){

     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   },function(){

   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   });

});

上面是核心代码,下面我们来看完整实例

 代码如下 复制代码

<style>

body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}

body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}

li{list-style:none;}img{border:none;}em{font-style:normal;}

a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{width:600px;position:relative;border:1px solid #e7e7e7;margin:20px auto}
</style>


<!-- 收缩展开效果 -->
<div class="box">
    <h1>jquery收缩展开效果第一层</h1>
 <div class="text">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
 </div>
</div>

<br />

<div class="box">
    <h1>jquery收缩展开效果第二层</h1>
 <div class="text">
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
 </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
   $(".box h1").toggle(function(){
     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   },function(){
   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
   });
});
</script>




分享给朋友:
您可能感兴趣的文章:
随机阅读: