`
wang_zhi_peng2007
  • 浏览: 251270 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js javascript 几个收缩/展开/折叠的js代码

 
阅读更多

javaScript

1.

<!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=gbk" />  
        <title>StripingTable</title>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
        <script type="text/javascript">  
        <!--   
            $(document).ready(function(){$("#helloDiv").hide(); });   
                
            function changeDisplay(){   
                var helloDivObj = $("#helloDiv");   
                var buttonObj = $("#btnDisplay");   
                var val = buttonObj.attr("value");   
                if(val=="隐藏"){   
                    helloDivObj.hide();   
                    buttonObj.attr("value","显示");   
                }else{   
                    helloDivObj.show();   
                    buttonObj.attr("value","隐藏");   
                }              
    }   
        -->  
        </script>  
    </head>  
    <body>  
           
        <input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()" />  
        <div id="helloDiv">  
        Hello,everyone<p></p>  
        Hello,everytwo<p></p>  
        Hello,everythree<p></p>  
        </div>  
    </bdoy>  
</html>

 

2.

<style> 
#content { 
font-size: 14px; 
width: 100%; 
height: 50px; 
background: #eee; 
padding: 10px; 
border: 4px #ccc double; 
overflow: hidden; 
} 
#key { 
color: red; 
float: right; 
margin-top: -20px; 
} 
span{cursor:pointer;} 
</style> 
<script> 
var s=5; 
var minheight=50; 
var maxheight=450; 
function shoppingcat(){ 
  var content=document.getElementById("content"); 
  var key = document.getElementById("key"); 
  var t=content.style; 
  if(t.height==""||t.height==0) 
    t.height=minheight; 
  var h=parseInt(t.height); 
  if(key.innerHTML=="展开"){ 
    h+=s; 
    t.height=h+"px"; 
    if(h<maxheight){ 
      setTimeout("shoppingcat();",1); 
    }else{ 
      key.innerHTML="关闭"; 
    } 
  }else{ 
    h-=s; 
    t.height=h+"px"; 
    if(h>minheight){ 
      setTimeout("shoppingcat();",1); 
    }else{ 
      key.innerHTML="展开"; 
    } 
  } 
} 
</script> 

<div id="content"><br/> 
<span id="key" onclick="shoppingcat();">展开</span><br/> 
藤床纸帐朝眠起, 

说不尽、无佳思。 

沈香烟断玉炉寒, 

伴我情怀如水。 

笛声三弄, 

梅心惊破, 

多少春情意。 


小风疏雨萧萧地, 

又催下、千行泪。 

吹箫人去玉楼空, 

肠断与谁同倚? 
一枝折得, 

人间天上, 

没个人堪寄。 

欢迎再次光临 

牛图库特效。 
</div>

 

3.

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<script language="javascript">
function tablecollapse()
{
/* Variables */
var collapseClass='footcollapse';
var collapsePic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213376.gif';
var expandPic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213394.gif';
var initialCollapse=true;
// loop through all tables
var t=document.getElementsByTagName('table');
var checktest= new RegExp("(^|\\s)" + collapseClass + "(\\s|$)");
for (var i=0;i<t.length;i++)
{
   // if the table has not the right class, skip it
   if(!checktest.test(t[i].className)){continue;}  
   // make the footer clickable
   t[i].getElementsByTagName('tfoot')[0].onclick=function()
   {
    // loop through all bodies of this table and show or hide 
    // them
    var tb=this.parentNode.getElementsByTagName('tbody');
    for(var i=0;i<tb.length;i++)
    {
     tb[i].style.display=tb[i].style.display=='none'?'':'none';
    }   
    // change the image accordingly
    var li=this.getElementsByTagName('img')[0];
    li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; 
   }
   // if the bodies should be collapsed initially, do so
   if(initialCollapse)
   {
    var tb=t[i].getElementsByTagName('tbody');
    for(var j=0;j<tb.length;j++)
    {
     tb[j].style.display='none';
    }   
   }
   // add the image surrounded by a dummy link to allow keyboard 
   // access to the last cell in the footer
   var newa=document.createElement('a');
   newa.href='#';
   newa.onclick=function(){return false;}
   var newimg=document.createElement('img');
   newimg.src=initialCollapse?expandPic:collapsePic;
   var tf=t[i].getElementsByTagName('tfoot')[0];
   var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
   newa.appendChild(newimg);
   lt.insertBefore(newa,lt.firstChild);
}  
}
// run tablecollapse when the page loads
window.onload=tablecollapse;
</script>
<style type="text/css">
body{
font-family:Arial,Sans-Serif;
font-size:90%;
background:#cc9;
}
#boundary{
background:#f8f8f8;
padding:2em;
width:40em;
}
h1{
font-family:"Trebuchet MS",Sans-serif;
text-transform:uppercase;
color:#696;
font-size:120%;
}
table.footcollapse{
width:30em;/* 调整表格宽度*/
}
table.footcollapse caption{
font-size:120%;
text-transform:uppercase;
text-align:left;
padding:.5em 30em;
}
table.footcollapse th{
text-align:left;
}
table.footcollapse,table.footcollapse th,table.footcollapse th
{
border:none;
border-collapse:collapse; 
}
table.footcollapse thead th
{
width:10em;
border-style:solid;
border-width:1px;
border-color:#cff #69c #69c #cff;
background:#9cf;
padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
border-style:solid;
border-width:1px;
border-color:#9cf #369 #369 #9cf;
background:#69c;
padding:2px 10px;
}
table.footcollapse tbody{
background:#ddd;
}
table.footcollapse tbody td{
padding:5px 10px;
border:1px solid #999;
}
table.footcollapse tbody th{
padding:2px 10px;
border:1px solid #999;
border-left:none;
}
table.footcollapse tbody tr.odd{
background:#ccc;
}
table.footcollapse tfoot td img{
border:none;
vertical-align:bottom;
padding-left:10px;
float:right;
}

</style>
</head>
<body>
<table summary="CDs I listened to recently" class="footcollapse">
<caption>这个</caption>
<thead>
   <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
   </tr>
</thead>
<tfoot>
   <tr>
    <th>结尾1</th>
    <td colspan="2">结尾2</td>
   </tr>
</tfoot>
<tbody>
   <tr>
    <th>值1</th>
    <td>值2</td>
    <td>值3</td>
   </tr>
   <tr class="odd">
    <th>值4</th>
    <td>值5</td>
    <td>值6</td>
   </tr>
   <tr>
    <th>值7</th>
    <td>值8</td>
    <td>值9</td>
   </tr>
   <tr class="odd">
    <th>值10</th>
    <td>值11</td>
    <td>值12</td>
   </tr>
   <tr>
    <th>值13</th>
    <td>值14</td>
    <td>值15</td>
   </tr>
</tbody>
</table>

</body>
</html>

 

分享到:
评论

相关推荐

    展开收缩jQuery折叠导航栏代码.zip

    该折叠导航菜单主要涉及以下几个技术点: 1. **jQuery选择器**:jQuery的选择器允许开发者高效地选取DOM元素,例如`$("#id")`选择ID为指定值的元素,`$(".class")`选择所有类名为指定值的元素。在这个导航栏中,...

    顶部点击展开层再次点击折叠(jquery)

    实现这个功能主要涉及到以下几个jQuery知识点: 1. **选择器**:jQuery 提供了丰富的选择器来选取 HTML 元素,如 `$("#id")` 选择 id 为特定值的元素,`$(".class")` 选择所有 class 匹配的元素。在这个案例中,...

    jquery实现展开和收缩

    在上述代码中,`#toggleBtn`是用于触发展开和收缩的按钮,而`#content`是我们想要控制显示和隐藏的元素。初始状态下,`#content`是隐藏的,因为CSS样式`display:none;`。 现在,我们将使用jQuery编写JavaScript代码...

    带缓冲的收缩与展开内容效果.rar

    在“带缓冲的收缩与展开内容效果”中,主要涉及到以下几个关键知识点: 1. **CSS3 Transitions**:CSS3的过渡属性允许我们在两种样式之间创建平滑的转换。通过指定一个属性和持续时间,我们可以让元素在改变状态时...

    展开/折叠GridView行

    总结来说,实现“展开/折叠GridView行”涉及以下几个关键点: 1. 使用JavaScript处理客户端事件,动态改变行的可见性。 2. 利用CSS来区分展开和折叠状态,提升用户体验。 3. 在C#后台处理数据和生成展开/折叠按钮。 ...

    js实现div层缓慢收缩与展开的方法

    知识点主要包括以下几个方面: 1. **JavaScript自定义函数**: 实现收缩与展开效果的核心在于自定义的JavaScript函数。这两个函数分别是`toggle`和`anim`,它们联合起来控制div的高度变化,并产生动画效果。 2. **...

    常用js javascript 导航菜单 图片切换 手风琴 弹出框 切换标签

    本压缩包中的资源涵盖了几个常见的JavaScript技术,包括导航菜单、图片切换、手风琴效果、弹出框以及切换标签,这些都是网页动态效果实现的核心组件。 首先,让我们详细探讨一下每个知识点: 1. **导航菜单**:...

    js树形导航菜单制作垂直js导航条特效

    最后,压缩包中的"js展开收缩"文件可能包含实现这些功能的具体JavaScript代码,你可以下载并根据自己的需求进行调整和优化。 总结一下,创建一个JavaScript驱动的垂直树形导航菜单涉及以下几个步骤: 1. 设计HTML...

    js折叠导航

    在创建一个js折叠导航时,我们需要考虑以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model (DOM)与网页内容进行交互。为了实现折叠导航,我们需要用到`getElementById`、`...

    本人收集的近50种伸缩滑动折叠菜单(js、css、div实现)

    特别是CSS3的过渡和动画属性,可以实现平滑的展开和收缩效果。同时,CSS的媒体查询(Media Queries)还可以确保菜单在不同设备和屏幕尺寸上的响应式布局。 3. div元素:在HTML中,div是用于分组其他HTML元素的容器...

    JS实现三级折叠菜单特效,其它级可自动收缩

    在本文中,将详细介绍如何使用JavaScript (JS) 技术实现一个三级折叠菜单特效,其中特别指出其他级别在点击展开时,能够自动收缩,从而避免菜单项之间的相互干扰。这种菜单常见于网站导航、下拉列表等场景中,能够...

    网页代码特效实例大全之折叠菜单

    在实现163网盘折叠菜单的过程中,主要涉及以下几个关键知识点: 1. **HTML 结构**:首先,我们需要用HTML创建菜单的基础结构。这通常包括一个父级容器,用于包含所有的菜单项,以及一系列的子菜单项。每个子菜单项...

    Js版的Outlookbar Menu

    在JavaScript中,Outlookbar Menu通常由以下几个关键部分组成: 1. **HTML结构**:首先,我们需要一个HTML结构来呈现菜单的各个部分,如主类别、子类别和链接。这通常包括`&lt;ul&gt;`和`&lt;li&gt;`元素,以及可能的`&lt;div&gt;`或`...

    可伸展收缩的内容显示栏目.rar

    “JS特效-其它代码”标签进一步确认了这个压缩包包含的是与JavaScript相关的代码,可能是用于创建特定效果的自定义脚本。JavaScript特效广泛应用于网页中,如悬停效果、动画、滑块、折叠面板等,而“其它代码”可能...

    js/jquery伸缩窗口菜单

    在伸缩窗口菜单的实现中,jQuery 的强大功能体现在以下几个方面: 1. **选择器**:jQuery 提供了一种简单的方式来选取DOM元素,如 `$("#menu")` 选择ID为 "menu" 的元素,这使得定位和操作菜单元素变得容易。 2. *...

    javascript常用特效

    在给定的“javascript常用特效”主题中,我们可以深入探讨以下几个关键知识点: 1. **带按钮轮换横幅广告**:这种效果通常用于网站的首页,通过点击按钮或自动定时切换来展示多张图片或广告内容。它涉及到DOM操作...

    jQuery实现文本展开收缩特效

    首先,定义了几个变量用于后续操作,其中`cur_status`用于记录当前状态,是`"less"`还是`"more"`,分别代表“收缩”和“展开”的状态。 ```javascript var cur_status = "less"; ``` ##### 函数定义 `show_more_...

    js导航条写的几种导航条

    JS可以处理复杂的菜单结构,使得多级菜单展开和收缩更加便捷,同时避免页面显得过于拥挤。 5. **Nick la的Mac风格的鱼眼效果菜单**: 鱼眼效果指的是菜单项在鼠标悬停时放大,类似Mac OS中的效果。这种设计富有...

    js-左侧导航插件-导航栏

    在实际开发中,为了实现一个功能完善的左侧导航插件,我们需要考虑以下几个方面: 1. **布局设计**:通常使用CSS(层叠样式表)来设置导航栏的样式,包括颜色、字体、边距等,以及响应式布局,确保在不同屏幕尺寸下...

    js横向扩展树

    横向扩展树的实现原理通常包括以下几个关键步骤: 1. **数据解析**:将XML或JSON数据转换为JavaScript对象,每个对象代表树的一个节点。 2. **布局计算**:根据数据结构,计算每个节点的位置,以便在水平方向上正确...

Global site tag (gtag.js) - Google Analytics