码迷,mamicode.com
首页 > 其他好文 > 详细

通过一组函数实现多组列表的折叠

时间:2018-08-08 17:39:59      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:gif   isp   splay   uri   spl   部分   table   highlight   通过   

在同一个页面,同一类型的折叠与展示通过一组函数就可以解决;

js部分:

function f_display_area(areaNm){

        f_display_flg(areaNm, ("none"==document.getElementById("area_" + areaNm).style.display));

}

function f_display_flg(areaNm, flg){

        var objBtn = document.getElementById("display_area_" + areaNm);

        var objTr = document.getElementById("area_" + areaNm);

        if(flg){        //  展示

                objTr.style.display = "";        //  这里最好填空,不会存在不识别的问题

                objBtn.src = "减号.gif";        //  更改折叠与展示的图片样式

        }else{       //  折叠

                objTr.style.display = "none"; 

                objBtn.src = "加号.gif"; 

        }

}

  

html部分(以table为例):

<table>

        <tr>

              <td>

                     <img src="减号.gif" id="display_area_plan" onclick=‘<%= "f_display_area(\"plan\");">‘>

              </td>

       </tr>

       <tr id="area_plan">

              <td>

                     ****************折叠展开部分(1)**************

              </td>

       </tr>

       <tr>

              <td>

                     <img src="加号.gif" id="display_area_budget" onclick=‘<%= "f_display_area(\"budget\");">‘>

              </td>

       </tr>

       <tr id="area_budget">

              <td>

                     ****************折叠展开部分(2)**************

              </td>

       </tr>

       <tr>

              <td>

                     <img src="减号.gif" id="display_area_happy" onclick=‘<%= "f_display_area(\"happy\");">‘>

              </td>

       </tr>

       <tr id="area_happy">

              <td>

                     ****************折叠展开部分(3)**************

              </td>

       </tr>

</table>

  

 

通过一组函数实现多组列表的折叠

标签:gif   isp   splay   uri   spl   部分   table   highlight   通过   

原文地址:https://www.cnblogs.com/qi-soul/p/9443902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!