js实现fieldset折叠

来源：互联网发布：2017山东网络歌手大赛编辑：程序博客网时间：2024/05/16 07:33

用js实现field折叠，主要利用table的显示和隐藏。

首先看元素：

<fieldset>        <legend>单元1</legend>        <table cellPadding="1" cellSpacing="1" border="0"  class="panel-t">            <tr>                <td >                    <input value="姓名">                    <input value="年龄">                </td>            </tr>        </table>    </fieldset>

js控制样式的变化：

function initToggle() {            var legends = document.getElementsByTagName('legend');            for (var i = 0, len = legends.length; i < len; i++) {                legends[i].onclick = function () {//绑定事件                    for (var j = 0, ln = this.parentElement.childNodes.length; j < ln; j++) {                        var nodeName = this.parentElement.childNodes[j].nodeName;                        if (nodeName && nodeName.toUpperCase() ===                                'TABLE') {//兼容浏览器,有的浏览器childNodes的个数不同                            var tbl = this.parentElement.childNodes[j];                            if (tbl.style.display === 'none') {                                tbl.style.display = 'block';                            } else {                                tbl.style.display = 'none';                            }                        }                    }                }            }        }        document.onreadystatechange = function() { //页面加载完后，注册事件            if (document.readyState == "complete") {                initToggle();            }        }

0 0