Question

function main() {
    workMenu("leftVerticalMenu");
}

function log(obj) {
    console.log(obj);
}

function workMenu(id) {
    var menuContainer = document.getElementById(id).children[0];
    closeListsNodes(menuContainer);
}

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");

    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul");

        for (var j = 0; j < need.length; j++) {
            need[j].style.display = "none";
            need[j].id = i.toString() + j.toString();
            need[j].onclick = function () {
                hideshow(need[j].id);
            };
        }
    }
}

function hideshow(id) {
    var need = document.getElementById(id);

    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }

}

此代码以最小化模式创建列表并输入ID。但代码不会将onclick event handler添加到html页面。我试图使用代码示例，但没有工作。如何在不使用jQuery的情况下实现它？

<body onload="main();">
    <div id="leftVerticalMenu">
        <ul>
            <li>
                <a href="#">item 1</a>
                <ul>
                    <li>
                        <a href="#">item 11</a>
                        <ul>
                            <li>
                                <a href="#">item 111</a>
                            </li>
                            <li>
                                <a href="#">item 112</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">item 12</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item 2</a>
                <ul>
                    <li>
                        <a href="#">item 21</a>
                    </li>
                    <li>
                        <a href="#">item 22</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

Answer 1

尝试以下方法：

if (el.addEventListener) {
  need[j].addEventListener('click', function() {hideshow(need[j].id);}, false);  //IE9+ and other browsers
} else if (el.attachEvent)  {
  need[j].attachEvent('onclick', function() {hideshow(need[j].id);}); //earlier than IE 9
}

Answer 2

试试这个

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");

    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul");

        for (var j = 0; j < need.length; j++) {
            need[j].style.display = "none";
            need[j].id = i.toString() + j.toString();
            need[j].onclick = function() {
                hideshow(need[j].id);
            };
        }
    }
}

或者您可以将onclick替换为

 need[j].addEventListener('click', function (){hideshow(need[j].id);});

Answer 3

此解决方案仅使用一个循环。如果列表项<li>元素不包含子<ul>列表，它将停止事件传播并防止折叠已展开的菜单（现在它也兼容IE8 / 7）：

function closeListsNodes(container) {
    var object = container.getElementsByTagName("li");
    for (var i = 0; i < object.length; i++) {
        var need = object[i].getElementsByTagName("ul")[0];
        if (need === undefined) {
            object[i].onclick = function(e){
                e = e||window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true; // for IE8/7 compatibility, http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
                }
            }
            continue;
        }
        need.style.display = "none";
        need.id = 'list'+i;
        object[i].onclick = (function (need) {
            return function(e){
                hideshow(need.id,e);
            };
        })(need); // create closure here to remember/pass the correct element to hideshow()
    }
}

function hideshow(id, e) {
    e = e||window.event; // for IE8/7
    var need = document.getElementById(id);
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true; // for IE8/7
    }
    if (need.style.display == 'none') {
        need.style.display = 'block';
    } else {
        need.style.display = 'none';
    }
}

http://jsfiddle.net/krTXh/4/（代码）
http://jsfiddle.net/krTXh/4/show（结果）

onclick事件未设置

3 个答案: