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

Posted 2020-12-28 qi-soul

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

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>