文档章节

关于用javascript做块的手风琴效果

 恐空控
发布于 2013/06/17 17:09
字数 821
阅读 146
收藏 0
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #main{margin-left:auto;margin-right:auto;width:640px;margin-top:100px;}
        #main h3{
            height: 35px;
            background-color: #ff99cc;
            border-style:solid;
            border-width:1px;
            cursor:pointer;
        }
        #fcontent{
            height: 200px;
            background-color: #cccccc;
        }
        #scontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #acontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #bcontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #ccontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
        #dcontent{
            height: 0px;
            background-color: #cccccc;
            display:none;
        }
    </style>


</head>
<body>
<div id="main">
    <h3 onclick="displaycontent(0)"  >title</h3>
    <div id="fcontent">1</div>
    <h3 onclick="displaycontent(1)"  >title</h3>
    <div id="scontent">678content...</div>
    <h3 onclick="displaycontent(2)"  >title</h3>
    <div id="acontent">123content...</div>
    <h3 onclick="displaycontent(3)"  >title</h3>
    <div id="bcontent">678content...</div>
    <h3 onclick="displaycontent(4)"  >title</h3>
    <div id="ccontent">123content...</div>
    <h3 onclick="displaycontent(5)"  >title</h3>
    <div id="dcontent">678content...</div>
</div>
  <script type="text/javascript">

     // 获得 所有 div  id 将其赋值给 一个变量
      var tempobj = document.getElementById("fcontent");
      var tempobjs = document.getElementById("scontent");
      var tempobja = document.getElementById("acontent");
      var tempobjb = document.getElementById("bcontent");
      var tempobjc = document.getElementById("ccontent");

      var tempobjd = document.getElementById("dcontent");

     //将获得的所有div的这些变量全部按顺序放到一个数组里 

       var divobjarray = [tempobj,tempobjs,tempobja,tempobjb,tempobjc,tempobjd];

      //  选择 所有div中的两个变量,通过这两个变量给div高度赋值,高度不为零的为默认打开的,高度为零的可顺便在其他div中选一个进行赋值。
     tempobj.style.height = "200px";
     tempobjs.style.height = "0px";
      //  将这上面讲的已赋值的两个变量按顺序放到一个只有两个元素的数组中,默认打开的其数组下标为0,另一个数组下标为1;
      var divobjoffandon =new Array();
          divobjoffandon[0]=tempobj;
          divobjoffandon[1] =tempobjs;
       //  设置  打开线程 和关闭线程的  变量id
      var intererids;
      var interverid;
     //  控制  div  打开或者是关闭 方法

      function acctiondisplay(tit){

//对下标为0的数组元素执行展开的炒作,对下标为1的数组进行关闭的操作

          var temp_height_on = parseInt(divobjoffandon[0].style.height);
          var temp_height_off = parseInt(divobjoffandon[1].style.height);
          divobjoffandon[0].style.display="block";
          divobjoffandon[0].style.height=temp_height_on+2+"px";//高度增加
          divobjoffandon[1].style.height=temp_height_off-2+"px";  //高度减少     
              if((temp_height_on >=200) ||(temp_height_off<=0) ){//当达到指定高度时 执行结束操作
                  divobjoffandon[0].style.height = "200px";
                  divobjoffandon[1].style.height = "0px";
                  divobjoffandon[1].style.display="none";
                  clearInterval(interverid);
              }
      }


       function displaycontent(tit){
           //  设置  打开或者是关闭状态的  数组
           // 判断当前的div数组变量是不是已经打开的div的数组变量 ,若是打开的就不打开了,下边函数将不执行。            

           if(divobjarray[tit]==divobjoffandon[0]){return;}  

    //若不是已打开的div数组变量,将已打开的div数组下标为0数组变量赋值给数组下标为1的数组变量,将从div块中传过来的参数所对应的数组中相应下标的变量赋值给只有2个元素的数组0下表为止,然后调用函数对 0下标相对应的的块的高度进行增加,1下标位置相对应的块的高度进行减少。         

           if(divobjarray[tit]!=divobjoffandon[0]){
           divobjoffandon[1] = divobjoffandon[0];
           divobjoffandon[0] = divobjarray[tit];
           interverid =  setInterval("acctiondisplay()",4);}
       }


     var div_obj_array_len = divobjarray.length;
     //  初始化 手风琴  目的:设置  overflow  同时将 其他的内容高度设置为0
      function acctioninit(){
          // 设置 每个div  的  sytle overflow :hidden
          for(var i=0;i<div_obj_array_len;i++){
              divobjarray[i].style.overflow="hidden";
              if(i!=0){
                  //  第一个div  的高度默认应该是 200  而其他的是 0
                  divobjarray[i].style.height="0";
              }
          }
      }
     // 调用初始化方法
     acctioninit();
  </script>


</body>

</html>


本程序有一个问题就是 偶尔会出现目的块打开时而 ,某一个块却未完全关闭。这个要多注意!!

© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂...

doliangzhe
2013/05/19
3.9K
2
css面试题: 手写collapse(折叠)的css/html部分

源码: github.com/any86/any-u… 做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组...

铁皮饭盒
07/17
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.6K
1
分享10个jQuery的标签页tabs和手风琴效果Accordion实现

日期:2012/02/06 来源:GBin1.com 手风琴效果和标签页效果很类似。主要的区别在于显示和隐藏的方式不同。这里我们精心收集了10个标签页和手风琴效果的实现,希望大家喜欢! 1. Yetii – Ye...

gbin1
2012/02/07
3.3K
1
前端基础-JavaScript

开发工具与关键技术:DW/浏览器 ;简单使用js。 作者:刘佳明 撰写时间:2019年1月 18 日 前面已经随手写过了关于网页编辑的一些基础布局和标签的认识;这篇文章在这里为大家简单的介绍一下关...

没有,
01/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
315
7
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部