展开折叠列表 - Javascript无法正常工作

Question

我有一个无序列表，其中包含我正在尝试展开的列表，并在用户点击打开和关闭图像时关闭。

<ul>
    <span id="0">
        <label class="rwfmsg">
            <img id="img0" src="close.png"></img>
            RWF Message
        </label>
    </span>
    <li></li>
    <li></li>
    <li>
        <span id="3">
            <label>
                <img id="img3" src="close.png"></img>
                Message Key Flags
            </label>
        </span>
        <span id="txt3" style="display: none">
            <ol>
                <li class="field"></li>
                <li class="field"></li>
                <li class="field"></li>
            </ol>
        </span>
    </li>
    <li></li>
</ul>

当我在浏览器中查看它时，Message Key Flags标签旁边的箭头会折叠，但是当我点击它时，它不会展开......

这是Javascript：

<script language="javascript">
    <!--
    var Open = ""
    var Closed = ""

    function init() {
        if (document.images) {
            Open = new Image(15, 15)
            Closed = new Image(15, 15)
            Open.src = "open.png"
            Closed.src = "close.png"
        }
        var i;
        var x = document.getElementsByTagName("img");
        for (i = 0; i < x.length; i++) {
            x[i].id = 'img' + i;
        }
        var n = 0;
        x = document.getElementsByTagName("span");
        for (i = 0; i < x.length; i++) {
            if ((i % 2) == 0) {
                x[i].id = '' + n;
                x[i].onclick = function() {
                    showhide(this);
                };
            } else {
                x[i].id = 'txt' + n;
                n++;
            }
        }
    }

    function showhide(elt) {
        var img = document.getElementById('img' + elt.id);
        var txt = document.getElementById('txt' + elt.id);
        if (txt.style.display == 'none') {
            txt.style.display = '';
            img.src = Open.src
        } else {
            txt.style.display = 'none'
            img.src = Closed.src
        }
    }
    -->
</script>

关于为什么展开/折叠不起作用的任何想法？