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>
时间： 2024-10-03 08:58:20

jquery收缩展开效果实例代码的相关文章

jquery实现手风琴效果实例代码_jquery

复制代码 代码如下: //jquery实现手风琴效果  <!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>  <

jquery多选项卡效果实例代码(附效果图)_jquery

复制代码 代码如下: <script type="text/javascript">    $(function() {        $(".designerspanel").each(function(){            $(this).find(".tabspanel #show:not(:first)").hide();        });         $(".designerspanel li&quo

js实现收缩菜单效果实例代码_javascript技巧

废话不多说,直接上代码: 有注释 复制代码 代码如下: <head>    <title></title>    <style type="text/css">        div        {            border: 1px solid black;            width: 100px;        }        ul .tit, .content        {            list-

通过jquery实现页面的动画效果(实例代码)_jquery

有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

js形成页面的一种遮罩效果实例代码

 这篇文章主要介绍了js形成页面的一种遮罩效果实例代码,有需要的朋友可以参考一下 用这锻代码 之前请先下载jquery库   代码如下: var maskStackCount = 0;   function mask(method){   //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window)   var winObj=window.top.$("body").find("iframe[name='dialog

基于jQuery实现返回顶部实例代码_jquery

效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

javascript实现TreeView 无刷新展开的实例代码

这篇文章介绍了javascript实现TreeView 无刷新展开的实例代码,有需要的朋友可以参考一下   复制代码 代码如下: function public_GetParentByTagName(element, tagName)  {     var parent = element.parentNode;     var upperTagName = tagName.toUpperCase();     //如果这个元素还不是想要的tag就继续上溯     while (parent &

Android5.0多种侧滑栏效果实例代码_Android

1.普通侧滑 效果图:   思路:通过自定义View继承HorizontalScrollView,然后重写onMeasure(),onLayout(),onTouchEvent() 方法并设置menu(通过动画使menu开始时处于隐藏状态)布局和content布局.(注意:使用ViewHelper类需要导入nineoldandroids-2.4.0.jar包) menu(left_menu)布局代码: <?xml version="1.0" encoding="utf-

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style