js实现展开关闭效果

效果图呈上：

       一开始我是用display:block和none实现的，后来发现不实用，因为用这种方法需要单独把需要展开的那部分放到一个标签里，然后对这个标签进行显示隐藏操作，这样的特别不利于维护和输入，综合对比下采用了overflow:hidden和visible的方法实现的。有了思路，写起来就很简单了，“展开”、“关闭”2个字要始终显示在所有可见区域的下方，这是一个关键点，可以在未展开前设置一个区域高度，展开之后让区域高度变为auto,这样就可以轻松实现了，代码给大家参考一下：

因为我做的是3个模块，所以用了一个for循环用于分别控制3个模块的展开和关闭。

js代码

View Code

 1 (function (){
 2  var index=document.getElementById("list_cou_zhankai");
 3  var vars=index.getElementsByTagName("var");
 4  var spans=index.getElementsByTagName("span");
 5  var strongs=index.getElementsByTagName("strong");
 6  var dls=index.getElementsByTagName("dl");
 7  var hei=vars[0].offsetHeight;
 8  for(var i=0;i<spans.length;i++){
 9   spans[i].οnclick=function zengjia(){
10    for(var i=0;i<spans.length;i++){
11     if(this==spans[i]){
12      if(vars[i].style.overflow=="visible"){
13       vars[i].style.overflow="hidden";
14       vars[i].style.height=45+"px";
15       strongs[i].innerHTML="▼展开";
16      }else{
17       vars[i].style.overflow="visible";
18       vars[i].style.height="auto";
19       strongs[i].innerHTML="▲关闭";
20      }
21     }
22    }
23   }
24  }
25 })();

转载于:https://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628603.html