javascript学习实录之六（div开关闭合效果实例） --刘小小尘-CSDN博客

以下代码是我写的关于标签开关闭合效果的实例，很简单的，内容及含义我就不说了，仔细看看，so easy

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title></title>
    <script type="text/javascript">
        function list2() {
            var aNode = event.srcElement;
            var tdNode = aNode.parentNode;
            var divNode = tdNode.getElementsByTagName("div")[0];
            var tabNode = document.getElementsByTagName("table")[0];
            var divNodes = tabNode.getElementsByTagName("div");
            for (var x=0;x<divNodes.length;x++) {
                if(divNodes[x] == divNode) {
                    openClose(divNodes[x])
                } else {
                    divNodes[x].className = "close";
                }
            }


        }
        function openClose(divNode) {
            if(divNode.className == "open") {
                divNode.className = "close";
            } else {
                divNode.className = "open";
            }
        }
    </script>

    <style type="text/css">
        table {
            border: cadetblue 1px solid;
        }
        table td {
            border: #0000FF 1px solid;
            background-color: #00CCFF;
        }
        table td div {
            background-color: #66FFCC;
            display: none;
        }
        table td a:link, table td a:visited {
            text-decoration: none;
            color: #993300;
        }
        .open {
            display: block;
        }
        .close {
            display: none;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
                <div>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
                <div>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
                <div>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                    javascript学习实录 之五（节点操作）<br/>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

转载于:https://www.cnblogs.com/jiangu66/archive/2013/05/10/3071989.html